如何重定向到 ngOnInit 中的新组件

Posted 2023-03-13

【中文标题】如何重定向到 ngOnInit 中的新组件

【英文标题】：How to redirect to a new component in ngOnInit

【发布时间】：2019-11-30 04:44:06

【问题描述】：

我正在制作一个 Angular 组件，用户可以通过单击发送到其电子邮件的链接来访问该组件，该链接包含他们的用户 ID。如果他们已经完成注册，我需要让它自动将他们重定向到管理页面。但是，似乎在ngOnInit 事件中使用router.navigate 不起作用，出现错误

错误：未捕获（承诺中）：错误：BrowserModule 已加载。

代码如下：

ngOnInit() 
this.activatedroute.params.subscribe(params => 
  this.API.getUserData(params['id']).subscribe(res => 
    console.log(res);
    this.item = res;
    sessionStorage.setItem('USER_ID', this.item._id);
    if (res["registry_complete"])
      this.router.navigate(['/user-admin']);
     else 
    
  );
);

我该如何做到这一点？

编辑：尽管错误说明了什么，BrowserModule 只在主模块中导入一次。如果“this.router.navigate(['/user-admin']);”被删除，代码运行良好。它在 ngOnInit 或构造函数之外也能正常运行。我怀疑这个错误的原因是因为 router.navigate 尝试再次加载主模块，并且由于页面正在加载它因此导入 BrowserModule 两次 - 但如果是这种情况，如何 em> 在 Angular 中以这种方式重定向？

编辑：这实际上是用户管理员路由模块中的一个问题。

【问题讨论】：

你能发布你的 app.module 吗？

你应该在构造函数中执行这个而不是 ngOnInit。

@Radwojt 如果在构造函数内部完成，也会发生同样的事情。

这个错误与ngOnInit无关。在您的应用中搜索 BrowserModule。它应该只导入一次。如果出现两次，则删除后面的出现，

@SaurabhTiwari BrowserModule 只导入一次。如果“this.router.navigate”被删除，它运行良好。如果“this.router.navigate”在 NgOnInit 或构造函数之外运行，它也可以正常运行。

【参考方案1】：

错误表明，您在应用中多次导入了BrowserModule。 docs中规定，BrowserModule模块必须在app的根模块中导入：

不要在任何其他模块中导入 BrowserModule。功能模块和 延迟加载的模块应该导入 CommonModule。他们需要 通用指令。他们不需要重新安装应用程序范围的提供程序。

另外，NoopAnimationsModule 和 BrowserAnimationsModule 包含 BrowserModule，因此如果您要导入其中之一，则需要删除导入 BrowserModule（如果有的话）。

【讨论】：

BrowserModule 仅在根模块中导入一次。我怀疑在初始化页面时尝试重定向可能调用根模块（因为它正在尝试加载新组件）并且在页面加载过程中执行此操作可能会导致它被导入两次，触发此错误。但如果是这种情况，您如何 重定向到新页面？

IndigoFenix，您能否在您的问题中添加通过路径/user-admin 加载组件的路由模块，以及该组件导入到的模块

你是对的，这是用户-管理员路由模块的问题。

【参考方案2】：

检查你正在导入哪些模块.module.ts

如果你使用BrowserAnimationsModule

放在BrowserModule之前

并检查子模块的导入是什么