Angular 可注射 Toastr 服务未定义

Question

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

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

我如何导出我的 ToastrWrapperClass

@Injectable()
export class ToastrAlertService {

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

@Injectable()
export class UserService {

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

这里我称之为处理错误（我想这可能是因为我如何处理 '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 为 'undefined'

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

Answer 1

您在哪里提供 ToastrService？

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

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

AppModule:

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

或

延迟加载模块：

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

Answer 2

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

 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 可注射 Toastr 服务未定义

Angular Injectable Toastr Service is undefined

toastr

angular

angular8