Angular Injectable Toastr 服务未定义

问题描述

我创建了一个自定义的 Toastr 服务（如果你愿意的话，更多的是一个包装类）。我将它注入到我的数据服务（api 调用）中，但每次调用它时都会收到一个未定义的错误。如果我在组件中使用此服务，则它可以正常工作。

我认为这可能与我在 Put 调用中使用它的方式有关。

我如何导出 ToastrWrapperClass

@Injectable()
export class ToastrAlertService {

我在这里注入它并且它引用了我正确的服务

@Injectable()
export class UserService {

    constructor(
        private http: HttpClient,private apiEndpointService: ApiEndpointsService,private adapter: UserAdapter,private toastrAlertService: ToastrAlertService,) { }

这里我称之为 Handle Error（我认为这可能是因为我在这里处理 'catchError' 的方式

public put(model: User): Observable<User> {
    const headers = new HttpHeaders()
        .set('Content-Type','application/json');

    const putModel = {
        Model: model,};

    return this.http.put(this.apiEndpointService.apiUrl(this.apiType + '/'),JSON.stringify(putModel),{ headers }).pipe(
        map((data: any) => this.adapter.adapt(data)),catchError(this.handleError),);
}

当我的 API 返回错误时，此 toastrAlertService 是“未定义的”

handleError(error) {
    this.toastrAlertService.showErrorToast(error);
    return throwError(error);
}

解决方法

你们在哪里提供 ToastrService？

从 Angular 6.0 开始，创建单例服务的首选方法是在服务的 providedIn 装饰器上将 root 设置为 @Injectable()。这告诉 Angular 在应用程序根中提供服务。 (see angular docs for more info)

以下是如何提供服务的一些示例：

AppModule：

@Injectable({
  providedIn: 'root'
})
export class ToastrAlertService {

或

使用延迟加载模块：

@Injectable({
  providedIn: LazyLoadedModuleName
})
export class ToastrAlertService {

按如下方式处理 catchError 为我解决了这个问题。（我确实将句柄错误逻辑移到了单个类中以使代码更清晰）

 return this.http.put(this.apiEndpointService.apiUrl(this.apiType + '/'),JSON.stringify(model),{ headers }).pipe(
        map((data: any) => this.adapter.adapt(data)),catchError(err => {
            this.apiErrorHandlerService.handleError(err);
            return of(null);
        }),);

angular angular angular8 toastr