如果页面（演练）已被查看一次，如何更改应用程序路由路径

Question

我有使用 ion-slides 构建的应用程序演练/介绍，它作为默认页面加载在 app.routing.module.ts 中。

{
    path: '',
    redirectTo: 'walkthrough',
    pathMatch: 'full'
  },{
    path: 'walkthrough',
    loadChildren: () => import('./walkthrough/walkthrough.module').then(m => m.WalkthroughPageModule)
  }

我只想在应用程序第一次启动时显示这个，所以我的问题是如何在应用程序路由模块中配置应用程序路由以设置一次打开页面？我阅读了 documentation 但找不到参考。

Answer 1

对于处于类似情况的任何人，您可以使用 angular 路由 gaurds 添加条件/用户逻辑。在 Walkthrough.ts 模块中，我将值设置为 storage:

ngOnInit(): void {
    // save key to mark the walkthrough as visited so the next time the user vistis the app, he would be redirected to log in
    Storage.set({
      key: 'visitedWalkthrough',
      value: 'true'
    });
  }

在 walkthrough.gaurd.ts 中，我检查相同的值并根据相同的值更改路由：

const { Storage } = Plugins;

@Injectable()
export class WalkthroughGuard implements CanActivate {
  constructor(private router: Router) {}

  async canActivate(): Promise<boolean> {
    const { value } = await Storage.get({ key: 'visitedWalkthrough' });

    if (value === 'true') {
      // this is a returning user, don't show him the walkthrough
      this.router.navigate(['auth']);
      return false;

    } else return true;
  }
}

很好的教程here:

如果页面（演练）已被查看一次，如何更改应用程序路由路径

How to change the app route path if a page (walkthrough) has been view once

ionic-framework

ionic5

ion-slides

walkthrough

app-router