Question

我是angular的新手，我正在尝试为我正在开发的网页实施错误处理程序。从错误处理程序

导航到错误页面时，我在显示错误页面时遇到问题

当我从错误处理程序导航到错误页面时，html中的插值表达式始终是未定义的，并且不会显示正在设置的错误。

在错误组件（下面的代码）中，globals.errmsg值已记录在构造函数中。但html不会显示该值。

html不显示它。看起来hte值根本没有传递到html。

请在下面找到代码

ReservationNotificationModule.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { RouterModule } from '@angular/router';
import { appRoutes } from './route';
import { Globals } from './Shared/Globals';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';



import { RestService } from './Shared/Rest.Service';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpErrorInterceptor } from './Shared/HttpErrorInterceptor';
import { GlobalErrorHandler } from './Shared/GlobalErrorHandler';
import { NotificationHomeComponent } from './Notification/NotificationHome-component';
import { NotificationErrorComponent } from './Notification/NotificationError-component';

export const httpInterceptorProviders = [
  { provide: HTTP_INTERCEPTORS, useClass: HttpErrorInterceptor, multi: true },
];


@NgModule({
  declarations: [
    NotificationAppComponent,
    NotificationHomeComponent,
    NotificationErrorComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes),
    HttpClientModule,
    CommonModule
  ],
  providers: [Globals, Header, RestService, { provide: ErrorHandler, useClass: GlobalErrorHandler }, httpInterceptorProviders],
  bootstrap: [NotificationHomeComponent]
})
export class ReservationNotificationModule {

}

通知主页组件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'notification-home',
  template: ` <div class="row"> some html</div>`

})
export class NotificationHomeComponent {

  constructor() {
    throw ("error");
  }
}

Globals.ts

import { Injectable } from '@angular/core';

@Injectable()
export class Globals {
  culture: string;
  errormsg: string;
}

GlobalErrorHandler

import { ErrorHandler, Injectable, Injector } from '@angular/core';
import { Router } from '@angular/router';
import { Globals } from './Globals'

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  constructor(private injector: Injector) { }
  handleError(error) {
    console.log(error);
    const globals = this.injector.get(Globals);
    globals.errormsg = "Sorry we ran into a problem. Try again later";
    const router = this.injector.get(Router);

    console.log("Inside Global Error Handler");
    router.navigate(['/error']);
  }
}

ErrorComponent.ts

import { Component, OnInit, Inject } from '@angular/core';
import { Globals } from '../Shared/Globals'

@Component({
  selector: 'notification-error',
  template: `Error :  {{globals.errormsg}}`
})
export class NotificationErrorComponent implements OnInit {

  constructor(public globals: Globals) {
    console.log(globals.errormsg)
  };

  ngOnInit() {

  }
}

项目中的角度依赖性

"dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "@ng-bootstrap/ng-bootstrap": "^2.2.2",
    "bootstrap": "^4.1.3",
    "core-js": "^2.5.4",
    "mustache": "^2.3.1",
    "rxjs": "^6.0.0",
    "zone.js": "~0.8.26"
  }

编辑：我注意到当我进行产品构建时，错误处理程序组件按预期工作。我仅在开发人员构建中看到此行为。如果有人遇到此问题，请尝试进行产品构建，看看它是否已解决。

从ErrorHandler导航时未按预期显示错误页面

0 个答案: