时间戳

首页 > 解决方案 > 无法通过任何组件角度的拦截器或构造函数显示 ng -bootstrap toast。但是通过单击按钮可以正常工作

angular - 无法通过任何组件角度的拦截器或构造函数显示 ng -bootstrap toast。但是通过单击按钮可以正常工作

问题描述

我试图通过调用 toastService 函数以角度通过拦截器显示烤面包机。这在组件中工作正常，一旦我单击组件内部的按钮，甚至拦截器的 toast 也会显示，但在拦截器内部不起作用实际上，即使在调用拦截器时，toasts 数组也会被填充，但它只在组件中生效，而不是拦截器我该如何解决？

看看我如何在拦截器中调用它

this.toastService.show('Some Error occurred while processing your request. please contact iCM tech support', {classname: 'bg-danger text-light', delay: 3000 , autohide: true, headertext: 'Error'});

当我添加时，同一行显示任何组件中的吐司。但不在拦截器内

这是我的拦截器代码

 constructor(private toastService: ToastService){
    // debugger
  }
 intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    if (!req.headers.has("Content-Type")) {
      req = req.clone({
        headers: req.headers.set("Content-Type", "application/json")
      });
    }
    this.token = localStorage.token ? localStorage.token : "";
    req = this.addAuthenticationToken(req);

    return next.handle(req).pipe(
      catchError((error: HttpErrorResponse) => {
        if (error && error.status === 401) {
            
          
        } 
        else {
          if (error && (error.status == 0 || error.status == -1)) {
            // code...
            //DO NOTHING
          }
          else{
            //SHOW TOASTERS HERE
            // debugger
            this.toastService.show('Some Error occurred while processing your request. please contact iCM tech support', {classname: 'bg-danger text-light', delay: 3000 , autohide: true, headertext: 'Error'});
            return throwError(error);   
          }
        }
      })
    ) as Observable<HttpEvent<any>>;
  }

单击红色按钮还显示拦截器中未显示的拦截器吐司

在此处输入图像描述

标签： angular

解决方案

问题在于变化检测实际上不起作用有时我们需要手动检测角度的变化每当外部改变一些东西时

import {Component, TemplateRef, ChangeDetectorRef} from '@angular/core';
import {ToastService} from '../toast.service';

@Component({
  selector: 'app-toasts',
  templateUrl: "./toasts.component.html",
  host: {'[class.ngb-toasts]': 'true'},
})
export class ToastComponent {
  public toasts:any = [];
  constructor(private chRef: ChangeDetectorRef, public toastService: ToastService) {
        let that = this;
        setInterval(() => {
            if (that.toastService.toasts.length > 0) {
                console.log("called")
                that.chRef.detectChanges();
            }
        }, 1500);
  }
}

所以我使用 ChangeDetectorRef 在间隔后强制进行更改检测，然后它开始检测更改并开始显示组件中的更新数据

对我来说， detectChanges正在下降，我在花了两个小时的时间后现在成功了

推荐阅读