未提供AppComponent加載錯誤

Question

@NgModule({ 
    declarations: [ 
    AppComponent 
    , DesktopComponent 

    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    ReactiveFormsModule, 
    HttpModule, 
    AppRoutingModule, 
    ) 
    ], 
    providers: [LoginService, { provide: LocationStrategy, useClass: HashLocationStrategy } , 
    { 
     provide: Http, 
     useFactory: httpFactory, 
     deps: [XHRBackend, RequestOptions, Router, AppComponent] 
    }, MasterDataService, PersonService 
    ], 
    bootstrap: [AppComponent] 

}) 
export class AppModule { } 

獲取錯誤錯誤：沒有提供商的AppComponent！當添加deps時：[XHRBackend，RequestOptions，Router，AppComponent]。

已經使用本教程https://scotch.io/@kashyapmukkamala/using-http-interceptor-with-angular2來實現攔截器。現在我想從Inteceptor類的AppComponent中調用一個方法。

這是攔截器方法，我只好打電話給AppComponent註銷方法

intercept(observable: Observable<Response>): Observable<Response> { 
     return observable.catch((err, source) => { 
      if (err.status == 401) { 

       localStorage.clear(); 
      this.appComp.logout(); 

      } else { 
       return Observable.throw(err); 
      } 
     }); 

在應用組件註銷方法

logout() { 
     console.log(" logging out"); 
     this.authenticated = false; 
     $('#wrapper').attr("style", "display:none"); 
     this.loginService.logout(); 
    } 

Answer 1

您嘗試在此處使用的方法與角度設計原則不一致，服務應該設計爲seperate concern，應該可以通過不同的組件重複使用，也可以測試。因此，服務不應直接與組件進行交互。相反，組件應該聽取來自服務的響應或事件，然後決定如何做出反應。

我建議創建一個通用通知服務，可用於在整個應用程序中發送內部消息。此服務不限於將攔截器發送的消息發送給AppComponent，但可以重複使用，以在應用程序的各個部分中傳遞事件。

下面是一個簡單通知服務的一個例子，這個服務都應該在你的攔截器，並在AppComponent注入：

import { Injectable } from '@angular/core'; 
import { Subject } from 'rxjs/Subject'; 
import { Notification } from './notification'; 

@Injectable() 
export class NotificationService { 
    private notificationSubject = new Subject<Notification>(); 
    public notifications = this.notificationSubject.asObservable(); 

    notify(notification: Notification): void { 
     this.notificationSubject.next(notification); 
    } 
} 

通知類看起來是這樣的：

export class Notification { 
    message: string; 
    status: NotificationStatus; 

    constructor(message?: string, status?: NotificationStatus) { 
     this.message = message; 
     this.status = status; 
    } 
} 

export enum NotificationStatus { 
    Success = 0, 
    Loading = 1, 
    Confirm = 2, 
    Error = 3, 
    Unauthorized = 4 
} 

所以當您想發送消息時，注入通知服務並呼叫通知方法：

if (err.status == 401) { 
    this.notificationService.notify(new Notification('Unauthorized', NotificationStatus.Unauthorized)); 
    return Observable.empty(); 
} 

你AppComponent就可以訂閱您的通知服務活動：

this.notificationService.subscribe(notification => { 
    if(notification.status == NotificationStatus.Unauthorized) { 
     //Handle any unauthorized errors here like and call logout() method 
    } 
}); 

Answer 2

在供應商爲什麼要使用「AppComponent」可以不要在供應商中使用組件

請嘗試以下代碼：

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import {HttpModule, Http, XHRBackend, RequestOptions} from '@angular/http'; 

import {AppComponent} from "./app.component"; 
import {httpFactory} from "./http.factory"; 

@NgModule({ 
    declarations: [ 
     AppComponent 
    ], 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     HttpModule 
    ], 
    bootstrap: [AppComponent], 
    providers: [ 
     { 
      provide: Http, 
      useFactory: httpFactory, 
      deps: [XHRBackend, RequestOptions] 
     } 
    ] 
}) 
export class AppModule { }