首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Angular -在呈现模板后加载数据-来自自定义错误处理程序的router.navigate

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

Stack Overflow用户
提问于 2018-06-06 15:41:17
回答 2查看 42关注 0票数 0

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

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

我想知道这个问题是否与从自定义错误处理程序触发this._router.navigate有关。

有什么可以帮我的吗?

错误处理程序类:

代码语言:javascript
复制
@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} }); 

  }
}

组件:

代码语言:javascript
复制
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() {

      }
    }

模板:

代码语言:javascript
复制
    <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>
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50714820

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档