通过拦截器触发 angular2 通知答案

【问题标题】：trigger angular2-notifications via interceptor通过拦截器触发 angular2 通知
【发布时间】：2018-09-01 07:59:02
【问题描述】：

我的 Angular 项目中有一个拦截器代码，它显示 api 响应的警报，我想用 angular2-notifications 替换它。

app.component.html

<router-outlet><app-spinner></app-spinner></router-outlet>

app.interceptor.ts

import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Injectable, Output, EventEmitter } from '@angular/core';
import { Router } from "@angular/router";
import 'rxjs/add/operator/do';
import 'rxjs/add/observable/throw'
import 'rxjs/add/operator/catch';


@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    constructor(private router: Router) {

    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const loaderContainer = document.getElementById("page-loader");
        if (sessionStorage.getItem('token')) {
            loaderContainer.style.display = "block";
            // Clone the request to add the new header
            const clonedRequest = req.clone({ headers: req.headers.set('Authorization', sessionStorage.getItem('token')) });
            // Pass the cloned request instead of the original request to the next handle
            return next.handle(clonedRequest).do(event => {

                // if the event is for http response
                if (event instanceof HttpResponse) {
                    loaderContainer.style.display = "none";
                    // stop our loader here
                    //this._loadingBar.complete();
                }

            }, err => {
                if (err instanceof HttpErrorResponse) {
                    loaderContainer.style.display = "none";
                }
                if (err instanceof HttpErrorResponse && (err.status == 401 || err.status == 403)) {
                    sessionStorage.clear();
                    this.router.navigate(['auth/login/simple']);
                    alert("sorry your session expire please logn to continue")
                }
            });
        }
        return next.handle(req);
    }
}

如何用 angular2-notifications 烤面包机替换“alert（“抱歉，您的会话过期，请登录以继续”）？

我不知道该放在哪里

<simple-notifications [options]="options"></simple-notifications>

在哪个文件中以及如何通过拦截器触发它？

【问题讨论】：

标签： angular

【解决方案1】：

您可以将<simple-notifications [options]="options"></simple-notifications> 放在您的主组件html 中。

而且你必须将 NotificationsService 导入并注入到拦截器的构造函数中

import { NotificationsService } from 'angular2-notifications';

constructor(
          private router: Router,
          private notificationsService: NotificationsService
        ) {}

然后在intercept 方法中，您可以使用通知服务创建通知。

`this._notifications.create(title, content, type, temp);`

找到angular2-notifications的官方演示

【讨论】：