angular - 为什么“Angular Material Tabs”仅在 Ionic 4 上激活另一个？

Question

我是 Ionic 4 的新手。我将Angular Material集成到我的 Ionic 4 项目中。我对Angular Material - Tabs & Navigation有疑问。在我切换 2 个选项卡大约 2 到 3 次后，该选项卡才激活另一个选项卡。我检查了 HTML 代码，我在下图中看到了问题：

当我重新加载应用程序时，它仍然正常

在我切换了2-3次之后，

这是我的项目结构：

请看我下面的代码：

应用程序路由.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home/tin-tuc',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: './home/home.module#HomePageModule'
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }),
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html

<ion-app>
  <ion-router-outlet main></ion-router-outlet>
</ion-app>

app.component.ts

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

import { Platform, MenuController } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {

  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private menuCtrl: MenuController,
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy, RouterModule, Routes } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

//Angular Material
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    //Angular Material Component
    BrowserAnimationsModule,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

home.page.html
我在 home.page.html 中调用 Angular Material Tabs

<ion-content>
  <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>
</ion-content>

home.page.ts
我为链接设置路径和标签名称

export class HomePage {
  navLinks = [
    { path: 'tin-tuc', label: 'TIN TỨC' },
    { path: 'nop-ho-so', label: 'NỘP HỒ SƠ' }
  ];
}

home.module.ts
我定义了我的组件 'tin-tuc' 和 'nop-ho-so' 并为它们设置路径！

//Components
import { TinTucComponent } from '../components/tin-tuc/tin-tuc.component';
import { NopHoSoComponent } from '../components/nop-ho-so/nop-ho-so.component';

@NgModule({
  imports: [
    ... //Some my other imported components

    RouterModule.forChild([
      {
        path: '',
        component: HomePage,
        children: [
          {
            path: 'tin-tuc',
            component: TinTucComponent
          },
          {
            path: 'nop-ho-so',
            component: NopHoSoComponent
          }
        ]
      },
    ]),
  ],

  declarations: [HomePage, TinTucComponent, NopHoSoComponent]
})
export class HomePageModule { }