Ionic 5路由器中登录/主页不会在登录/注销时销毁

Question

我的项目使用IONIC 5和Firestore。有两个不同的ion-router-outlet，分别用于验证（Home）和非验证（Index）路由。以下是在类app.component.ts中为用户动态打开登录/主页的代码。

  this.afAuth.authState.subscribe(user => {
    if (user) {
      this.router.navigateByUrl('home');
    } else {
      this.router.navigateByUrl('index');
    }
  }); 

流程：登录页面 -> (登录) -> 主页 -> (注销) -> 登录页面。当主页打开时，登录页面仍在加载并处于导航栈中。登录页面的 ngOnDestroy 不会执行。注销后，登录页面再次打开，但类的 constructor 和 ngOnInit 方法不会执行。这将导致很多问题，因为页面初始化不会重新加载。同样的问题也出现在“主页 -> (注销) -> 登录页面 -> (登录) -> 主页”的流程中。

如何在登录后销毁登录页面，在注销后销毁主页，以便在同一会话中重新打开时可以重新加载？

编辑：

以下是路由配置：

app-routing.module.ts

const routes: Routes = [
  {
    path: 'home',
    canLoad: [AuthGuard],
    loadChildren: () => import('./home/home.module').then(m => m.HomePageModule)
  },
  {
    path: 'index',
    loadChildren: () => import('./index/index.module').then(m => m.IndexPageModule)
  },
];

Home.html和Index.html都有相同的以下代码。

<ion-content>
  <ion-router-outlet></ion-router-outlet>
</ion-content>

index-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: IndexPage,
    children:[
      {
        path: '',
        loadChildren: () => import('../pages/login/login.module').then( m => m.LoginPageModule)
      },
    ]
  }
];

home-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: HomePage,
    children:[
      {
        path: '',
        loadChildren: () => import('../pages/user/user.module').then( m => m.UserPageModule)
      },
.....
Other authenticated pages
]

- Tapas Mukherjee

---

你能展示一下你的路由配置吗？ - Aakash Garg

我在原帖中添加了。谢谢。 - Tapas Mukherjee

你可不可以使用Ionic页面生命周期中提供的钩子函数：ionViewWillEnter()、ionViewDidEnter()、ionViewWillLeave()和ionViewDidLeave()，而不是使用ngOnDestroy和ngOnInit？ - julianobrasil

@TapasMukherjee 你的两个路由器出口放在哪里了？ - Aakash Garg

@julianobrasil，如果我找不到解决方案，那将是一个解决方法，但这是不应该发生的情况。认证页面和模块应在注销后被销毁。 - Tapas Mukherjee

Answer 1

最简单的解决方案是，您应该使用“replaceUrl” NavigationExtras导航到路由。

this.router.navigate(['/home'], { replaceUrl: true });

这将替换历史记录中的当前状态，因此您的登录页将被销毁。基本上它设置了一个新的根。

参考资料

- Chetan Bansal

---

我之前尝试使用“replaceUrl: true”选项和navigatebyurl方法，但有时从登录页面导航到主页时无法正常工作，我没有找到合适的解决方案，但现在使用navigate方法可以正常工作。谢谢。 - Tapas Mukherjee

Answer 2

您描述的看似意外的行为是由Ionic引起的。更具体地说，它是由于Ionic如何处理页面的生命周期。

当您导航到新页面时，Ionic将保留旧页面在现有DOM中，但将其从您的视图中隐藏，并转换为新页面。

...

由于特殊处理，当您通常认为它们应该触发时，ngOnInit和ngOnDestroy方法可能不会被触发。例如，在选项卡界面中在每个页面之间导航只会调用每个页面的ngOnInit方法一次，而不是在后续访问中触发。ngOnDestroy仅在页面“弹出”时触发。

不了解您的应用程序，我建议您使用Ionic生命周期事件而不是Angular事件来处理页面组件。听起来您可以将ngOnInit替换为ionViewWillEnter，并将ngOnDestroy替换为ionViewWillLeave或ionViewDidLeave。

在文档的下方有一些有用的生命周期方法指南。

- Chris Newman

---

感谢详细的解释。使用“replaceUrl：true”选项可以解决问题。生命周期钩子可以完成工作，但我还需要编写额外的代码进行清理和初始化。 - Tapas Mukherjee

Answer 3

我认为你面临的问题是销毁之前的页面。

在Iconic中，当你导航到其他页面时，它仍然保留在DOM中。

因此，你的ngOnDestroy()没有被调用。

你可以将你的navigate()函数替换为navigateRoot()。这将解决你的问题并完全销毁它。

所以你的代码应该看起来像：

 this.afAuth.authState.subscribe(user => {
  if (user) {
    this.router.navigateRoot('home');
  } else {
    this.router.navigateRoot('index');
  }
 }); 

希望这能解决你的问题。

- Minal Shah

---

Router 没有名为 navigateRoot 的函数。 - Tapas Mukherjee