javascript - Angular 6 Bootstrap 4 必须在菜单选项卡上单击两次

Question

我必须单击以下菜单“文本视图”选项卡（mat-tab-link）两次以使路由器插座变为活动状态并在选项卡下划线。我知道这是因为单选按钮的documents.component.html 内容，它不会变为活动状态，除非我在“文本视图”选项卡上单击两次。然后“选项 4”按钮显示为活动状态，选项卡下划线。

文档-pane.component.html

<nav mat-tab-nav-bar aria-label="documentsTabs">
  <a class="navbar-brand" [routerLink]="['/customApp']">CustomApp</a>
  <a mat-tab-link 
    *ngFor="let link of navLinks"
    [routerLink]="link.path"
    routerLinkActive #rla="routerLinkActive"
    [active]="rla.isActive"
    skipLocationChange>
    {{link.label}}
  </a>
</nav>

<router-outlet></router-outlet>

文档-pane.component.ts

import { Component, OnInit } from '@angular/core';
import { CustomAppDocumentsComponent } from './documents/documents.component';
import { CustomAppGridComponent } from './grid/grid.component';
import { CustomAppSearchComponent } from './customApp-search/customApp-search.component';

@Component({
  selector: 'app-documents-pane',
  templateUrl: './documents-pane.component.html',
  styleUrls: ['./documents-pane.component.scss'],
})
export class CustomAppDocumentsPaneComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  navLinks = [
    {path: 'documents', label: 'Text View'},
    {path: 'grid', label: 'Grid View'},
    {path: 'customApp-search', label: 'Search Terms'},
  ]
}

应用程序路由.module.ts

...
import { CustomAppDetailComponent } from './customApp/customApp-detail.component';
import { CustomAppBaseComponent } from './customApp/documents-pane/customApp-base/customApp-base.component';
import { CustomAppDocumentsComponent } from './customApp/documents-pane/documents/documents.component';
import { CustomAppGridComponent } from './customApp/documents-pane/grid/grid.component'
import { CustomAppSearchComponent } from './customApp/documents-pane/customApp-search/customApp-search.component'
...

...
const routes: Routes = [
{
    path: 'customApp',
    component: CustomAppDetailComponent,
    children: [
      {
        path: '',
        component: CustomAppBaseComponent,
      },
      {
        path: 'customApp-base',
        component: CustomAppBaseComponent,
      },
      {
        path: 'documents',
        component: CustomAppDocumentsComponent,
      },
      {
        path: 'grid',
        component: CustomAppGridComponent,
      },
      {
        path: 'customApp-search',
        component: CustomAppSearchComponent,
      },
    ]
  }
...

文档.component.html

<div style='float: left; width: 75%;'>
  <mat-radio-group formControlName="testEntryOption">
    <mat-radio-button class="material-radio" value="opt1">Option 1</mat-radio-button>
    <mat-radio-button class="material-radio" value="opt2">Option 2</mat-radio-button>
    <mat-radio-button class="material-radio" value="opt3">Option 3</mat-radio-button>
    <mat-radio-button class="material-radio" value="opt4" [checked]="true">Option 4</mat-radio-button>
  </mat-radio-group>
</div>

<div style='float: left; width: 25%;'>
  <mat-button-toggle-group name="buttonSelection">
    <mat-button-toggle value="button1">Button 1</mat-button-toggle>
    <mat-button-toggle value="button2">Button 2</mat-button-toggle>
  </mat-button-toggle-group>
</div>
<div>
  documents works!
</div>

我尝试了其他几种代码实现，甚至是引导菜单栏，但都没有成功。非常感谢任何输入。我有哪些选择？

标签： javascripthtmlangularmat-tab