angular - 加载时没有 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 { }

获取错误 Error: No provider for AppComponent!添加 deps 时:[XHRBackend、RequestOptions、Router、AppComponent]。

使用过本教程https://scotch.io/@kashyapmukkamala/using-http-interceptor-with-angular2实现一个拦截器。现在我想从 Inteceptor 类调用 AppComponent 中的一个方法。

这是我必须调用 AppComponent logout 方法的拦截器方法

 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);
            }
        });

在App组件注销方法

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

Answer 1

您在此处尝试使用的方法不符合 Angular 设计原则，服务应设计为 seperate concern并且应该可以被不同的组件重用并且可以测试。因此，服务不应尝试直接与组件交互。相反，组件应该监听来自服务的响应或事件，然后决定如何使用react。

我建议创建一个通用通知服务，可用于在整个应用程序中发送内部消息。此服务不仅限于将消息从您的拦截器发送到 AppComponent，还可以重复用于在您的应用程序的各个部分中传递事件。

这是一个简单的通知服务的例子，这个服务应该被注入(inject)到你的拦截器和 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
}

所以当你想发送消息时，注入(inject)通知服务并调用notify方法:

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
    }
});