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

在App Component Log out方法

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

Answer 1

您在此处尝试使用的方法与Angular设计主体不一致，服务应设计为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);
    }
}

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
}

因此，当您要发送消息时，请注入通知服务并调用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
    }
});

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 { }

加载

2 个答案: