Question

我正在尝试将新用户（不涉及身份验证）重定向到选择国家/地区，以便首次使用该应用程序。我正在使用防角罩，并且我正在懒惰加载。我正在检查以下链接：https://angularfirebase.com/lessons/ionic4-intro-slides-tutorial-to-educate-app-users/。但是问题是，由于我是懒加载，所以我尝试按以下方式实现它。

app.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { TutorialGuard } from './guards/tutorial.guard';

const routes: Routes = [
{ path: '', loadChildren: './pages/main/main.module#MainPageModule', 
canActivate: [TutorialGuard]},
]

主页，它是主页和收藏夹页面的父页面

    const routes: Routes = [
  {
    path: 'main',
    component: MainPage,
    children: [
       { path: 'home', loadChildren: '../home/home.module#HomePageModule' 
},
      { path: 'favorites', loadChildren: 
'../favorites/favorites.module#FavoritesPageModule' },
      { path: 'country-selection', loadChildren: '../country- 
   selection/country-selection.module#CountrySelectionPageModule' },

    ]
  },
  {
    path: '',
    redirectTo: '/main/home',
  }
];

tutorial.guard.ts

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, RouterStateSnapshot, CanActivate, Router 
} from '@angular/router';
import { Storage } from '@ionic/storage';

@Injectable({
  providedIn: 'root'
})
export class TutorialGuard implements CanActivate  {
  constructor(private storage: Storage, private router: Router) {}

  async canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Promise<boolean> {

    const isComplete = await this.storage.get('tutorialComplete');
    console.log('is storage complete?', isComplete);

    if (!isComplete) {
      this.router.navigateByUrl('main/country-selection');
    console.log('the tutorial is not complete');
    }

    return isComplete;
  }
}

编译后，屏幕变成白色，并且我在 tutorial.guard.ts 中提到的console.log部分永远运行。

你能告诉我我在做什么错吗？

Answer 1

我认为问题在于您将其设置为默认路由。这意味着，由于您不允许输入此路由，因此该应用会尝试将您引导至默认路由，即默认路由，因此您陷入了循环。

Answer 2

您在两个地方都提到根模块作为主页模块。因此这是一个无限循环，变成了空白循环。注意：每当使用延迟加载模块时，请使用canLoad（）而不是canActivate（）。

App.module.ts

const routes: Routes = [
{ path: '', loadChildren: './pages/main/main.module#MainPageModule', 
canActivate: [TutorialGuard]},
]

主页：

  {
    path: '',
    redirectTo: '/main/home',
  }

警卫队没有按预期工作

2 个答案: