时间戳

首页 > 解决方案 > Ionic 4 在生命周期事件中导航，防止在重新加载时显示页面

angular - Ionic 4 在生命周期事件中导航，防止在重新加载时显示页面

问题描述

我有一个页面，除非用户登录（帐户详细信息），否则该页面不应加载。但是，如果用户访问该直接 URL，我更愿意将他定向到登录页面。目前我正在这样做：

ionViewWillEnter() { 
  if (notLoggedIn()){
    this.navCtrl.navigateRoot('/tabs/(account:account/login)');
    console.log('No user defined when at registration page, redirecting');
    }
  }

我让控制台记录，但页面没有导航到正确的页面（URL 更改，但旧页面显示）。

标签： angularionic-frameworkangular-routerionic4

解决方案

一些 Ionic 生命周期事件在 Ionic 4 中没有触发，我认为是由于切换到 Angular 路由而不是 Ionic 路由。特别是在 NavController 文档中，它显示 ionViewCanEnter 使用 navCtrl.push 方法，而不是 navCtrl.navigateRoot 或 forwards/backwards 的新方法（这是我在上面输入之前第一次尝试的方法）。

因此，为了解决这个问题，我使用了普通的 Angular 路由生命周期保护，但坚持使用 Ionic NavController 进行导航。我创建了一个新的生命周期守卫，如图所示：

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {

    if (this.userService.isLoggedIn()) { return true; }
    this.navCtrl.navigateRoot('/tabs/(account:account/login)');
    return false;

  }

效果很好。

对于一起学习 Ionic 和 Angular 的人来说，这里有很好的文档

推荐阅读