Недавно я прочитал эту полезную статью о Angular 2 Router и посмотрел демо. Все казалось совершенным. Но когда я попытался определить активный маршрут на основе класса router-link-active
, я узнал, что корневой маршрут всегда активен.
Вот фрагмент кода app.component.ts, где настроены "основные" маршруты:
@Component({
selector: 'demo-app',
template: `
<a [routerLink]="['/']">Home</a>
<a [routerLink]="['/about']">About</a>
<div class="outer-outlet">
<router-outlet></router-outlet>
</div>
`,
// add our router directives we will be using
directives: [ROUTER_DIRECTIVES]
})
@Routes([
// these are our two routes
{ path: '/', name: 'Home', component: HomeComponent }, // , useAsDefault: true}, // coming soon
{ path: '/about', name: 'About', component: AboutComponent }
])
export class AppComponent { }
Если изменить путь от '/'
до '/home'
и <a [routerLink]="['/']">Home</a>
до <a [routerLink]="['/home']">Home</a>
, то компонент по умолчанию (который должен быть HomeComponent) исчезнет. HomeComponent будет активирован, только если щелкнуть ссылку и router-link-active
будет добавлен и удален правильно каждый раз, когда мы перейдем на другой маршрут.
Является ли это ошибкой или что-то не так с конфигурацией маршрутов?