如何在Angular 2中显示带消息的错误页面

Question

详情

我试图制作一个错误页面,当错误的路由检测或未经授权的访问或其他类型的异常发生我想重定向到页面,并希望在我的角度应用程序在此页面上显示受尊重的错误.现在我只是通过在查询字符串中传递错误消息来做到这一点.但是我希望在没有查询字符串的情况下传递不同的异常消息我怎么能实现它.并提出建议,最好的方法是什么.

错误组件

import { Inject } from '@angular/core';
import { Component } from '@angular/core';
import { OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Router } from '@angular/router';
import 'rxjs/add/operator/map';

@Component({
    selector: 'error',
    template: `
    <h2>Error</h2>
    <h4> {{ errMessage | async }} </h4>
    `
})
export class ErrorComponent implements OnInit {

    errMessage: Observable<string>;

    constructor(@Inject(Router) private router: Router) { }

    ngOnInit() {

        this.errMessage = this.router.routerState.queryParams
            .map(params => params['errMsg'] || '');

    }
}

App.Route

import { provideRouter, RouterConfig } from '@angular/router';

import { AccountComponent } from './components/account/account.component';
import { PageNotFoundComponent } from './components/not-found.component';
import { userRoutes } from './components/user/user.routes';

import { AuthGuard }          from './services/auth/auth-guard.service';
import { AuthService }        from './services/auth/auth.service';

import { loginRoutes,
    authProviders }      from './components/account/account.routes';

import { ErrorComponent } from './components/error.component';
import { approvalRoutes } from './components/approval/approval.routes';

import { CanDeactivateGuard } from './services/auth/can-deactivate-guard.service';
import { AppComponent } from './components/app.component';

export const routes: RouterConfig = [      
    ...loginRoutes,
    ...userRoutes,
    ...approvalRoutes,
    { path: 'error', component: ErrorComponent},
    { path: '**', component: PageNotFoundComponent }
];

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes),
    authProviders,
    CanDeactivateGuard
];

错误

当有些事情出错时,我称这个消息

public handleError(msg) {        
    let errorData = msg.json();
    let navigationExtras = { queryParams: { 'errMsg': errorData.Message }           
};

图片

Answer 1

我用共享服务解决了这个问题,使用BehaviorSubject显示最后一个值.

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class ErrorService {

    private updateSubject: BehaviorSubject<string> = new BehaviorSubject<string>('');

    update$: Observable<string> = this.updateSubject.asObservable();

    updateMessage(message: string) {        
        this.updateSubject.next(message);
    }
}

此服务仅在app模块中定义.

@NgModule({
    providers: [
        ErrorService,
        ...
    ],
    ...
})

要设置错误消息,只需注入服务并设置消息:

@Component({
   ...
})
export class LayoutComponent {

    constructor(private errorService: ErrorService,
    private router: Router) {
    }

    processError() {
        this.errorService.updateMessage('Custom error message');
        this.router.navigate(['error']);
    }
}

错误组件将使用这样的服务:

import { Component, OnDestroy } from '@angular/core';
import { ErrorService } from './error.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
    templateUrl: 'app/error/error.component.html'
})
export class ErrorComponent implements OnDestroy {

    message: string = '';
    subscription: Subscription;

    constructor(private errorService: ErrorService) {
        this.subscription = this.errorService.update$.subscribe(
            message => {
                this.message = message;
            });
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
}