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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (113)

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

我们重定向的组件:

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

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励