Question

我一直在尝试找出如何在我所有的角向路径都带有一个参数的情况下完成此操作。

我的路线如下：

const routes: Routes = [
  { path: '', component: HomePageComponent },
  {
    path: ':gymId',
    children: [
      { path: 'login', component: UserLoginComponent },
      { path: 'profile', component: UserProfileComponent, canActivate: [AuthGuard] },
      {
        path: 'users',
        children: [
          {
            path: ':userId',
            children: [
                {
                    path: '',
                    component: UserProfileComponent,
                },
            ]
          },
        ]
      },
      {
        path: 'events',
        children: [
          { path: '', component: EventsListComponent },
          {
            path: ':eventId',
            children: [
                {
                    path: '',
                    component: ViewEventComponent,
                },
                {
                  path: 'edit',
                  component: EventEditorComponent,
                  canActivate: [AuthGuard]
              }
            ]
          },
        ]
      },
      {
        path:'event/new',
        component: EventEditorComponent,
        canActivate: [AuthGuard]
      }
    ]
  },

];

有没有一种方法，如果用户尝试转到没有:gymId的页面，它将自动添加该页面？例如/profile-> /gym151/profile，或者如果用户只是重定向到/，它将转到/gym151？

Answer 1

您可以尝试停用警卫并从那里重定向到适当的路由。

@Injectable({
  providedIn: 'root'
})
export class RedirectGuard implements CanDeactivate<TodoComponent> {
  canDeactivate(
    component: TodoComponent,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot) {
    this.router.navigateByUrl(`/${currentRoute.params['gymId']}`);
    return true;
  }

  constructor(
    private router: Router
  ) { }
}

像这样的事情 https://stackblitz.com/edit/angular-uttust

Angular 7路由-如何确保所有路由都带有：gymId参数

1 个答案: