2016-10-03 2 views
0

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

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

После нажатия героя я иду в «деталь героя» экран, но «Heroes» ссылка не активна.

Я хотел бы подчеркнуть "герои" якорь, когда I`m на приложение/подробно /: идентификатор

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 маршрутным маршрутом «героев». Я не думаю, что есть способ сказать угловым, чтобы показать маршрут активным, даже если вы не на этом пути. –

+0

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

+0

Я получаю _core .umd.js: 3462 ИСКЛЮЧЕНИЕ: Неподготовлено (в обещании): Ошибка: не может соответствовать любым маршрутам: 'detail/11'_ Почему мне нужно определить пустой путь, если уже существует путь героев, определенный выше? Герои не являются дочерью пути героев ... –

ответ

1

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

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

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

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

Смежные вопросы