Блог

Главная - Вопросы по программированию - Как перенаправить активную ссылку без привязки

Как перенаправить активную ссылку без привязки

#angular #angular2-routing

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

Вопрос:

У меня есть две ссылки в моем компоненте приложения

 <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>    --> app/dashboard
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>          --> app/heroes

После того, как я нажимаю на героя, я перехожу на экран «сведения о герое», но ссылка «Герои» не активна.

Я хотел бы выделить привязку «героев», когда я нахожусь в приложении / detail /:id

 path: 'detail/:id'

Это мои полные маршруты const:

 const appRoutes: Routes = [
  {
    path: '',
    redirectTo: '/dashboard',
    pathMatch: 'full'
  },
  {
    path: 'detail/:id',
    component: HeroDetailComponent
  },
  {
    path: 'dashboard',
    component: DashboardComponent
  },
  {
      path: 'heroes',
      component: HeroesComponent
  }
];

ваша любезная помощь приветствуется

Комментарии:

1. Единственное, о чем я могу думать, это сделать detail/:id маршрут дочерним маршрутом heroes маршрута. Я не думаю, что есть способ указать angular показывать маршрут как активный, даже если вы не на этом маршруте.

2. Что-то вроде: {path: 'heroes',children: [{path: "", component: HeroesComponent}, {path: "detail/:id", component: HeroDetailComponent}]}

3. Я получаю core.umd.js: 3462 ИСКЛЮЧЕНИЕ: неперехваченный (в обещании): Ошибка: не удается сопоставить какие-либо маршруты: ‘detail / 11’ Зачем мне нужно определять пустой путь, если уже есть путь героев, определенный выше? Heroes не является дочерним элементом пути heroes…

4. используя этот дочерний метод, вы перемещаете компонент из исходного объявления пути в дочерние маршруты, пустой путь просто означает, что при нажатии /heroes он загрузит этот компонент, но при нажатии /heroes/detail/:id вы перейдете к другому компоненту. Ошибка, которую вы получили, связана с тем, что вам нужно обновить ссылку, которую вы использовали, чтобы перейти к detail маршруту, к которому нужно перейти /heroes/detail

5. РЕШАЕМАЯ: Пришлось манипулировать моей функцией навигации на маршрутизаторе. Добавлено '/heroes' ранее '/detail/ , и это сработало. this.router.navigate(['/heroes/detail', this.selectedHero.id]); Большое спасибо!

Ответ №1:

Единственный известный мне способ сохранить routerLinkActive включенным на маршруте — это использовать дочерние маршруты. Обновление маршрутов как таковых:

 {path: 'heroes',children: [
    {path: "", component: HeroesComponent},
    {path: "detail/:id", component: HeroDetailComponent}
]}

позволит вам перейти к /heroes и /heroes/detail/:id и оставить /heroes в качестве активного маршрута

Кроме того, есть варианты, которые вы можете добавить к маршруту, если вы НЕ хотите такого поведения на родительском маршруте, вы можете найти их здесь