代码之家 › 专栏 › 技术社区 › D.B

角度-模板呈现后加载数据-router.navigate from a custom error handler

typescript angular

0

D.B · 技术社区 · 7 年前

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

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

我想知道这个问题是否与此有关。路由器导航是由自定义错误处理程序触发的。

我很感激你的帮助?

错误处理程序类:

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

2 回复 | 直到 7 年前

1

0

Sh. Pavel 7 年前

我们重定向的组件:

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变量将其作为{{redirectederror}绑定到html视图

2

0

D.B 7 年前

问题是,当一个异常被触发时,它会使应用程序离开角度区域,这是设计的。解决方案是使用服务ngzone的run方法重定向到错误页,强制按如下方式重新进入角度区域:

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

导入模块:

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