路由器 getCurrentNavigation 始终返回 null答案

【问题标题】：Router getCurrentNavigation always returns null路由器 getCurrentNavigation 始终返回 null
【发布时间】：2019-07-20 07:51:09
【问题描述】：

在最新版本的 Angular 7.2.6 中，我正在尝试在路由器本身中传递数据

this.router.navigate(['other'], {state: {someData: 'qwert'}}

在OtherComponent 文件中，this.router.getCurrentNavigation() 始终返回 null

【问题讨论】：

你在哪里调用函数？我认为ngOnInit() 为时已晚，因为导航已经完成github.com/angular/angular/blob/7.2.6/packages/router/src/…
在OtherComponent 中，并将其修改为constructor 中，并且成功了！

标签： angular

【解决方案1】：

你调用getCurrentNavigation 方法太晚了。导航完成。

您需要在构造函数内部调用getCurrentNavigation 方法：

constructor(private router: Router) {
    this.name = this.router.getCurrentNavigation().extras.state.someData;
}

或者，如果您想访问ngOnInit 中的导航，您可以执行以下操作：

ngOnInit() {
    this.name = history.state.someData;
}

【讨论】：

【解决方案2】：

对于规范（测试），constructor 上的 getCurrentNavigation() 不起作用，您必须使用 ngOnInit() 上的 history 和 history 上的模拟值，例如：

beforeEach(() => {
    window.history.pushState({name: 'MyName', id: 1}, '', '');
}

现在您的组件可以在 ngOnInit() 上使用此值并在规范上使用：

ngOnInit(): void {
    console.log(history.state.name);
}

【讨论】：

【解决方案3】：

这发生在我身上是因为在使用当前状态的 getCurrentNavigation().extras().state 之前，在 NavigationEnd 的 Event 中有一个 promise（异步过程）。

我移动了承诺，瞧！它设法在没有先被清理的情况下获取数据。

【讨论】：

【解决方案4】：

为我工作 Ionic 4

【讨论】：

【解决方案5】：

像这样更改代码，因为在 constructor() 之后，只有 ngOnInit() 被调用，因此值变为空

constructor(private router: Router) {
   this.name = this.router.getCurrentNavigation().extras.state.example;
}

【讨论】：