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

Posted 2023-02-23

【中文标题】Angular 路由器附加组件数据而不是替换组件

【英文标题】：Angular router appends component data instead of replacing the component

【发布时间】：2018-06-08 15:59:07

【问题描述】：

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

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

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

或

它会在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']);

注意

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

【问题讨论】：

你可以发布你的路由文件和你路由到new-password页面的ajax调用

您找到解决问题的方法了吗？我试图在我的应用程序中解决这个问题大约两周，但没有成功

是的。！！当您的组件A 或B 出现错误时，这个问题就来了..！幸运的是，我的错误显示在console 中，即touched undefined ，所以我找到了该错误的替代项（已修复错误）。尝试在两个typescript 文件中查找错误，您将找到解决方案。ATB

【参考方案1】：

更新到最新版本的 Angular

另外，试试：

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

【讨论】：

我已经尝试过zone 和set time，但是不管用，我找到了解决方案，我会尽快更新我的答案。

使用“区域”在角度 6 中对我的影响更大。有人能指出 BrowserAnimationModule 和区域之间的关系吗？我发现了这个：github.com/angular/angular/issues/19093 但毫无头绪。

【参考方案2】：

对我来说

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

成功了

【参考方案3】：

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

【讨论】：

new-password 页面包含非常敏感的数据，除非电子邮件链接为真，否则只有它应该去。！ else 它应该停止 @forgot。 Secondly like you said 如果我在失败时检查代码新密码页面，它应该重定向到@forgot，因此两者都是相同的；问题无法解决

您可以在同一个新密码页面中使用*ngif，并在错误情况下重定向到错误页面。

没有错误页面...!!!!!!我想你不会明白我的意思