Блог

Я новичок в Ionic 4. Я интегрирую Angular Material в свой проект Ionic 4. У меня проблема с вкладками и навигацией Angular Material. После того, как я переключаю 2 вкладки примерно 2-3 раза, вкладка просто активирует другую. Я проверяю HTML-код и вижу проблему на изображении ниже:

Когда я перезагружаю приложение, оно по-прежнему работает нормально

После того, как я переключился 2-3 раза,

Это моя структура проекта:

Пожалуйста, посмотрите Мой код ниже:

app-routing.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

Я вызываю вкладки Angular Material в home.page.html

 <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 { }