时间戳

首页 > 解决方案 > Angular - 模板渲染后加载数据 - router.navigate 来自自定义错误处理程序

angular - Angular - 模板渲染后加载数据 - router.navigate 来自自定义错误处理程序

问题描述

我已经构建了一个自定义错误处理程序类来拦截应用程序中发生的所有错误。发生错误时，应用程序使用 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>

标签： angulartypescript

解决方案

我们重定向的组件：

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}}

推荐阅读