在 Angular 4 中导航后未调用组件代码

Posted 2023-03-13

【中文标题】在 Angular 4 中导航后未调用组件代码

【英文标题】：Component code not called after navigation in Angular 4

【发布时间】：2018-10-09 04:58:42

【问题描述】：

我正在尝试使用 Angular 5.0.0 实现错误处理程序。

在实现ErrorHandler接口的错误处理程序中，我将当前路由更改为错误组件路由：

router.navigate(['/error'], queryParams: errorWithContextInfo);

浏览器栏中的 URL 发生变化，显示组件 html，调用 constructor，不调用 onInit，视图中无法访问成员变量（始终为空，即使它们是公共的并且具有默认值）。

然后，当我按 F5 时，错误路由被正确加载，在 onInit 钩子上的构造函数中更改的所有成员变量都可以按预期在视图中访问。

如何解决此问题？ （queryParams 应该可以在导航后立即在组件视图中访问）。

【参考方案1】：

您可以在导航完成时使用 NgZone 强制更改检测。

在构造函数中注入：

import NgZone from '@angular/core';
import Router from '@angular/router';
constructor(private router: Router, private zone: NgZone) 

然后像这样调用导航操作：

this.zone.run(() => router.navigate(['/error'], queryParams: params));

详情请参阅Angular 2 ngOnInit not called 和this issue。