我已经构建了一个自定义的错误处理程序类来拦截应用程序中发生的所有错误。当发生错误时,应用程序使用router.navigate将用户重定向到错误视图,并将错误详细信息作为查询参数发送。该组件只是读取查询参数并将它们绑定到视图中。虽然我可以看到query参数变量在开发人员控制台中有数据,但它并没有显示在视图中。我需要刷新错误页面才能在视图中查看该数据。
我决定在构造函数和/或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>
发布于 2018-06-15 11:21:58
问题是,当一个异常被触发时,它会使应用程序离开角度区域,这是设计出来的。解决方案是使用服务NgZone的run方法重定向到错误页面,强制重新进入角度区域,如下所示:
this._zone.run(() => router.navigate(['/error'], { queryParams: {error: error} }));
导入模块:
import { ErrorHandler, Injectable, Injector, NgZone } from '@angular/core';
发布于 2018-06-06 15:53:09
我们从中重定向的组件:
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}}
https://stackoverflow.com/questions/50714820
复制相似问题