javascript - Angular 6 Bootstrap 4はメニュータブを2回クリックする必要があります

Question

次のメニュー「テキスト ビュー」タブ (mat-tab-link) を 2 回クリックして、ルーター アウトレットをアクティブにし、タブに下線を引く必要があります。これは、ラジオ ボタンの documents.component.html コンテンツが原因でわかります。[テキスト ビュー] タブを 2 回クリックしない限り、ラジオ ボタンはアクティブになりません。次に、[オプション 4] ボタンがアクティブになり、タブに下線が引かれます。

ドキュメントペイン.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>

ドキュメントペイン.コンポーネント.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'},
  ]
}

app-routing.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,
      },
    ]
  }
...

ドキュメント.コンポーネント.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>

他のいくつかのコードの実装を試しましたが、ブートストラップ メニュー バーも試しましたが、うまくいきませんでした。どんな入力でも大歓迎です。私のオプションは何ですか？