如何观察某些组件中的 angular 5 拦截器错误

Question

嗨，我是 angular 5 的新手，关注了一些博客来编写 HTTP 拦截器。

export class AngularInterceptor implements HttpInterceptor {
public http404 = false;
constructor() { }

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    console.log("intercepted request ... ");

    // Clone the request to add the new header.
    const httpReq = req.clone(
        {
            headers: req.headers.set("headerName", "headerValue")
        }
    );

    console.log("Sending request with new header now ...");

    //send the newly created request
    return next.handle(httpReq)
        .catch((error, caught) => {
            //intercept the respons error and displace it to the console 
            console.log("Error Occurred");
            if(error.status === 404)
this.http404 = true;
//need to pass this value to another component. Let's say app.component.ts and display some message to the user.
            //return the error to the method that called it
            return Observable.throw(error);
        }) as any;
}

}

这工作正常。但是我需要做的是将这个错误代码传递给其他组件，并在屏幕上为用户打印出一条消息。一种方法是创建一个可观察对象，但我无法实现它。

非常感谢任何帮助。

Answer 1

您可以利用一项服务来做到这一点，方法是利用 Subject。这是使用 BehaviourSubject.

的示例

首先你创建一个服务。此服务将在两个 classes:

之间共享

export class BroadcastService {
    public http404: BehaviorSubject<boolean>;

    constructor() {
        //initialize it to false
        this.http404 = new BehaviorSubject<boolean>(false);
    }
}

在您的 HttpInterceptor class 中，您将 BroadcastService 注入其中。要更新 BehvaiourSubject，只需使用 .next():

export class AngularInterceptor implements HttpInterceptor {
    public http404 = false;

    constructor(public broadcastService: BroadcastService) {
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        console.log("intercepted request ... ");

        // Clone the request to add the new header.
        const httpReq = req.clone({
            headers: req.headers.set("headerName", "headerValue")
        });

        console.log("Sending request with new header now ...");

        //send the newly created request
        return next.handle(httpReq)
            .catch((error, caught) => {
                //intercept the respons error and displace it to the console
                console.log("Error Occurred");
                if (error.status === 404)
                    this.http404 = true;
                //need to pass this value to another component. Let's say app.component.ts and display some message to the user.
                this.broadcastService.http404.next(true);
                //return the error to the method that called it
                return Observable.throw(error);
            }) as any;
    }
}

在您的 app.component.ts 中，只需使用 .asObservable() 订阅即可。你也需要注入它：

export class AppComponent implements ngOnInit {
    constructor(public broadCastService: BroadcastService) {
    }

    OnInit() {
        this.broadCastService.http404.asObservable().subscribe(values => {
            console.log(values); // will return false if http error
        });
    }
}

如何观察某些组件中的 angular 5 拦截器错误

How to observe the angular 5 interceptor error in some component

rxjs

angular-http-interceptors

angular5