将服务注入组件后，如何解决加载 Angular 应用程序时出现的问题？

Question

这是我的示例代码。在我将 OrderDetailService 注入 home.component.ts 的构造函数后，我的应用程序未加载并且浏览器因抛出此错误而挂起：我从堆栈本身经历了不同的解决方案，但我的问题尚未解决。谁能帮帮忙

common.js:167 Throttling navigation to prevent the browser from hanging. See https://crbug.com/882238. Command line switch --disable-ipc-flooding-protection can be used to bypass the protection

home.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { OrderDetailService } from '../../services/order-detail.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  providers: [OrderDetailService]
})
export class HomeComponent implements OnInit {
  searchCriteria: any = {};
  orderDetailResultForView = [];
  destroy$: Subject<boolean> = new Subject<boolean>();

  constructor(private orderDetails: OrderDetailService) { }

  ngOnInit(): void {
  }

}

顺序-detail.service.ts

import { Injectable } from '@angular/core';
   import { map } from 'rxjs/operators';
   import { Http, Response, Headers } from '@angular/http';
   import { BaseUrlService } from './base-url.service';
   @Injectable({
    providedIn: 'root',
  })
  export class OrderDetailService {

  constructor(private http: Http, private basicUrl: BaseUrlService) { }
  }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';

   import { AppRoutingModule } from './app-routing.module';
   import { AppComponent } from './app.component';
   import { HomeComponent } from './components/home/home.component';
   import { BaseUrlService } from './services//base-url.service';
   import { OrderDetailService } from './services/order-detail.service';

   @NgModule({
    declarations: [
    AppComponent,
    HomeComponent
   ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [OrderDetailService,BaseUrlService],
  bootstrap: [AppComponent]
  })
  export class AppModule { }

谢谢

Answer 1

我在你的 home.component.ts:

中使用你的组件装饰器有点费劲

 @Component({
      selector: 'app-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.css'],
      providers: [OrderDetailService] => I would remove this line
    })

在我的项目中，我没有在组件的装饰器中声明提供者。我会删除供应商那里的行。

第二件事：如我所见，您使用的是 http，因此您可能需要在 app.module.ts 中导入任何服务，例如 HttpClientModule（这是我需要导入的，以便在 Angular10 中使用 http 服务）。

Answer 2

您需要删除 AppModule 和 HomeComponent 上的 OrderDetailService。

这是因为您在 Injectable 中指定 @Injectable({ providedIn: 'root' }) 这是默认情况下加载到您的应用程序的根目录。

服务

根据 Angular Dependency Injection Documentation

下面将声明此服务应由 root 应用程序注入器创建。

Angular creates injectors for you as it executes the app, starting with the root injector that it creates during the bootstrap process.

@Injectable({
  providedIn: 'root',               
})
export class OrderDetailService { ...}

你应该更新你的

组件

import { OrderDetailService } from '../../services/order-detail.service';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

   // You can use it directly
   constructor(private orderDetails: OrderDetailService) { }

}

AppModule

@NgModule({
    ...,
    providers: [BaseUrlService],
    ...
})
export class AppModule { }

将服务注入组件后，如何解决加载 Angular 应用程序时出现的问题？

How to solve issue in loading Angular app, after service is injected to the component?

service

components

angular