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。

Angular Material 2 无法设置默认活动标签

Angular Material 2 unable to set default active tab

angular-material2

routerlinkactive

routerlink

angular

angular2-md-tabs