Question

我已经构建了一个自定义错误处理程序类来拦截应用程序中发生的所有错误。发生错误时，应用程序会使用router.navigate将用户重定向到错误视图，并将错误详细信息作为查询参数发送。该组件只是读取查询参数并在视图中绑定它们。虽然我可以看到查询参数变量在开发人员控制台中有数据，但它没有显示在视图中。我需要刷新错误页面以在视图中查看该数据。

我决定硬编码我想要在构造函数和/或ngOnInit方法的视图中显示的变量值，以便查看变量是否显示在视图中，我仍然看不到使用router.navigate从处理程序加载页面时的值。如果我直接输入错误URL，我确实可以看到绑定的值。

我想知道问题是否有一些事情需要从自定义错误处理程序触发this._router.navigate。

我感谢你的帮助吗？

错误处理程序类：

@Injectable()
export class ErrorsHandler implements ErrorHandler {
 constructor(
     private injector: Injector,
 ) {}

handleError(error: Error | HttpErrorResponse) {        

  const router = this.injector.get(Router);
  const appService = this.injector.get(AppService);

  router.navigate(['/error'], { queryParams: {error: error} }); 

  }
}

组件：

export class ErrorsComponent implements OnInit {

      errorMessage: any;
      constructor(private activatedRoute: ActivatedRoute, private _appService: AppService) {

        // activatedRoute.queryParams.subscribe(
        //   params => {
        //     this.errorMessage = params;
        //     console.log(this.errorMessage.error);

        //   });

        this.errorMessage = 'Hi';
        console.log(this.errorMessage);

      }

      ngOnInit() {

      }
    }

模板：

    <div class="error-container">
      <div>
        <h1 *ngIf="errorMessage" >ERROR {{errorMessage}}</h1>
        <a mat-raised-button [routerLink]="'/'">
          <h5>Get a new Candiate</h5>
        </a>
      </div>  
    </div>

Answer 1

我们重定向的组件：

moveToErrorView(myError: string) {
this._router.navigate(['app/error-view', myError]);
}

组件错误 - 视图（获取参数）：

sub: any;
...
constructor(praivate _activatedRoute: ActivatedRoute) {
};
...
ngOnInit() {
this.sub = this._activatedRoute.params.subscribe(params => {
this.redirectedError = params['myError'];
});

然后使用redirectedError变量将其绑定到HTML视图{{redirectedError}}

Answer 2

问题在于，当触发异常时，它会使应用程序离开角度区域，这是设计的。解决方案是使用服务NgZone的run方法重定向到错误页面，强制重新进入Angular区域，如下所示：

this._zone.run(() => router.navigate(['/error'], { queryParams: {error: error} }));

导入模块：

import { ErrorHandler, Injectable, Injector, NgZone } from '@angular/core';

Angular - 在呈现模板后加载数据 - router.navigate从自定义错误处理程序

2 个答案: