Angular 路由器附加组件数据而不是替换组件

Question

首先我尝试了这个答案，但没有找到我的解决方案：Similar question

让我解释一下我是如何实现的：

1. 我有两个组件 forgot-password & new-password
2. 当用户提交忘记密码表单时，他会得到一个email verification link。
3. 当用户点击该电子邮件link
4. 它将转到 forgot-password.ts 文件，然后在 ngOnInit ajax 调用。
5. 如果 success 数据从 ajax 响应中重定向到 new-password

或

6. 它会在frogot密码页面本身抛出错误

我的问题： 当我尝试使用外部链接 (Gmail 链接) ajax 响应后从忘记密码 ts 文件导航到新密码时；它 附加组件数据，而不是将 forgot 替换为 new 组件。

我的app.moduel.ts：

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  imports:      [
   BrowserAnimationsModule,
})

这是我的路由代码 forgot-password.ts：

if(result.data == "failure")    {
// failure no data
}
else {
// success data
this._router.navigate(['new-password']);
}

注意

1. 当我在我的评论中评论这些BrowserAnimationsModule app.module.ts 路由工作正常。但是我需要 thisBrowserAnimationsModule.!什么是替代解决方案。
2. 如果不是外部链接 (Gmail)，routing 工作正常。

Answer 1

更新到最新版本的 Angular

另外，试试：

 if(result.data == "failure")    {
    // failure no data
 }
 else {
   // success data
   this.zone.run(() =>{
      this._router.navigate(['new-password']);
   });
 }

Answer 2

对我来说

setTimeout(() => {
   this.router.navigate(['']);
}, 0);

成功了

Answer 3

您可以在 email verification link 中提供新密码页面的路由链接，而不是从忘记密码 ts 文件导航到新密码，并且在新密码组件的构造函数中，您可以使用您的 ajax 调用，成功该打开的新密码页面，在错误情况下导航到错误页面。