Angular Material 2 не может установить активную вкладку по умолчанию

Question

Ниже код взят из material.angular.io:

<nav mat-tab-nav-bar>
  <a mat-tab-link
     *ngFor="let link of navLinks"
     [routerLink]="link.path"
     routerLinkActive #rla="routerLinkActive"
     [active]="rla.isActive">
    {{link.label}}
  </a>
</nav>

<router-outlet></router-outlet>

составная часть:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  navLinks = [
    {label: 'Home', path: 'home'},
    {label: 'Contacts', path: 'contacts'},
    {label: 'Settings', path: 'settings'}
  ];
}

Когда я попытался запустить этот образец, навигация требует щелчка по дому, чтобы открыть компонент. Я хочу, чтобы содержимое дома отображалось изначально. Как установить первое значение в качестве активной вкладки по умолчанию?

Answer 1

Это потому, что маршрутизатор, скорее всего, находится в корневом маршруте /, Если вы хотите, чтобы домашний маршрут был корневым, вам нужно настроить конфигурацию маршрутизатора для этого случая или установить по умолчанию домашний маршрут.

RouterModule.forRoot([{
  path: '',
  component: AppComponent,
  children: [{
    path: 'home',
    component: HomeComponent,
  }],
}, {
  path: '**',
  redirectTo: '/home',
}]);

В ваших текущих настройках, когда вы нажимаете вкладку Home, маршрутизатор перемещается по странице к /home,