Angular 角度-呈现模板后加载数据-路由器。从自定义错误处理程序导航

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

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

我想知道这个问题是否与此有关。_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>

错误{{errorMessage}
买新糖果

我们从中重定向的组件：

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

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

---

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

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

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

导入模块：

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

---

不知道这是否有帮助，但是，我用另一种方式设置并获取路由器参数。主要的事情，这可能会影响-是使用订阅获取路由器参数，并保存到您的组件变量。我也遇到了同样的问题，它为我解决了。好吧，正如你在代码中看到的，我尝试了“订阅”，但它不起作用。更糟糕的是，您在代码中看到的示例具有我想要显示的硬编码值，我不再是读取查询参数的事件。我想知道ity是否与此有关。_router.navigate是从自定义错误处理程序触发的。为什么要将错误作为URL参数传递？将其存储在错误处理程序中，并将其注入

ErrorsComponent

中，您可以在其中读取错误。是否存储它？你是说使用服务吗？正如你在代码中看到的，我尝试了“订阅”，但没有成功。更糟糕的是，您在代码中看到的示例具有我想要显示的硬编码值，我不再是读取查询参数的事件。我想知道ity是否与this.\u router.navigate由自定义错误处理程序触发有关。

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