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'}
  ];
}

當我嘗試運行此示例時，導航需要單擊home才能打開該組件。 我希望最初顯示房屋的內容。 如何將第一個值設置為默認的活動選項卡？

Answer 1

這是因為路由器最有可能位於根路由/ 。 如果您希望將本地路由作為根路由，則需要設置路由器配置以使其成為事實，或者將默認設置設置為本地路由。

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

在當前設置中，單擊“主頁”選項卡時，路由器會將頁面導航到/home 。