Angular 2 корневой маршрут всегда активен

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

Является ли это ошибкой или что-то не так с конфигурацией маршрутов?

Ответ 1

Для меня работало следующее свойство вашего домашнего якоря. [routerLinkActiveOptions]="{ exact: true }"

узнать больше https://github.com/angular/angular/issues/8397#issuecomment-237314970

Ответ 2

Это не ошибка, насколько мне известно, вам нужен резервный компонент для / или неизвестных путей. (скорее всего, HomeComponent)

@Routes([
  { path: '/home', component: HomeComponent },
  { path: '/about', component: AboutComponent },
  { path: '*', name: component: HomeComponent }
]);

Это, однако, использует новый Router модуль (не устаревший) и работает в rc.0 и rc.1

Ответ 3

Вот как это будет работать:

<nav>
    <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a>
    <a routerLink="/about" routerLinkActive="active">About</a>
</nav>