Angular - 带有路由器参数变量的动态路由

Question

我想在我的 routing.module.ts 中做这样的事情（见用--> 标记的行）

export const routes: Routes = [
        path: 'test/:action',
        component: CreateComponent,
        --> canActivate: ':action' == 'read' ? [Guard1] : [Guard1, Guard2],
        data: {
        -->  screenAction: ':action' == 'read' ? 'read' : ':action',
        }
]

我必须使用变量 :action 因为它稍后会在路由器参数中使用。感谢您的帮助！

Answer 1

嗯，你问的是可能的，但实现它可能有点复杂。

首先，你需要定义多个路由而不是1个。你可以在哪里应用你需要的条件。

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: AppComponent },
  {
    path: 'dummy1/:action',
    component: Dummy1Component,
    canActivate: [GuardRotaterGuard],
  },
  {
    path: 'dummyx/:action',
    component: Dummy2Component,
    canActivate: [Guard1Guard],
  },
  {
    path: 'dummyz/:action',
    canActivate: [Guard1Guard, Guard2Guard],
    component: Dummy2Component,
  },
];

路由dummy1/:action 就像一个网关路由。每个对 dummy2 组件的请求都应该从这里开始。然后你需要一个可以根据路由参数决定和轮换路由的决策者/旋转器守卫。 它应该如下所示：

canActivate(
    next: ActivatedRouteSnapshot,
    statex: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    const { action } = next.params;
    const state = { comesFrom: 'rotater' };
    console.log("rotater",action);
    if (action === 'read') { // you can decide whatever you want here
       this.router.navigate(['/dummyx/read'], { state });
    }else{
      this.router.navigate(['/dummyz', action], { state }); // pass the action to the other route as a parameter
    }

     return true;
  }

here 是 Stackblitz 的一个实际例子。