Маршрутизация Angular 7 - как убедиться, что все маршруты предваряются параметром:gymId

#angular #angular-routing

#angular #angular-маршрутизация

Вопрос:

Я пытался выяснить, как это сделать, когда все мои угловые маршруты имеют добавленный к ним параметр.

Мои маршруты выглядят так:

 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 ?

1. таким образом, пользователь не может перейти к ‘/’? Он должен перенаправляться на ‘/:gymId/profile’? Если это так, то вы можете изменить маршрут HomeComponent, чтобы вместо этого пустой путь маршрута перенаправлял на нужный маршрут. angular.io/guide/router#set-up-redirects

2. хм, как я могу получить :gymId , если его больше нет в маршруте? Для этого я подписываюсь на параметры маршрута, и если они переходят на URL-адрес, который больше не указан в маршруте, это все ломает :/

Ответ №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

1. Это просто очень просто, поэтому, если вы выберете что-то подобное, я уверен, что его можно изменить, чтобы лучше соответствовать вашим потребностям.

2. потребуется this.router.navigateByUrl( ли для /${currentRoute.params[‘gymId’]} ); дополнительные маршруты к нему или этого достаточно, чтобы дополнить все маршруты этим параметром gymId?

3. Это перенаправит каждый маршрут, к которому он привязан, когда вы пытаетесь перейти от этого компонента. Вероятно, вы захотите проверить маршрут, чтобы узнать, нужно ли его перенаправлять, прежде чем вызывать navigatebyurl

4. хм, я просматриваю документы Angular по canDeactivate, и я не совсем уверен, для чего component они нужны. С чем это связано конкретно?

5. Одно из применений can деактивировать защиту — предоставить способ предотвратить навигацию из компонента, когда форма изменилась и не была сохранена. Компонент предоставляет доступ к компоненту, чтобы вы могли при необходимости проверить состояние компонента.