我有错误，它的路由更有可能比图标更快地改变，但它相当糟糕和最糟糕的。它一直错误这么长时间，我仍然不能找到答案为什么。
也许离子学中的一些大师可以帮助我。
这里有一些15s的视频预览link here for video
这是我在tabs.html上的代码

<ion-tabs #tabs class="ion-no-border" lines="none" >
  <ion-tab-bar slot="bottom" mode="ios" (click)="changeHomeIcon()">
    <ion-tab-button tab="home">
      <ion-icon [src]="isHomeSelected ? clickedHomeIcon : iconHome" ></ion-icon>
      <!-- <ion-icon name="home-outline"></ion-icon> -->
      <ion-label>Home</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="construction" mode="ios" (click)="changeJobIcon()">
      <ion-icon [src]="isJobSelected ? clickedJobIcon : iconJob" ></ion-icon>
      <!-- <ion-icon name="briefcase-outline"></ion-icon> -->
      <ion-label>My Job</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="construction2" mode="ios" (click)="changeNotificationIcon()">
      <ion-icon  [src]="isNotificationSelected ? clickedNotificationIcon : iconNotification" ></ion-icon>
      <!-- <ion-icon name="notifications-outline"></ion-icon> -->
      <ion-label>Notification</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="profile" mode="ios" (click)="changeAccountIcon()">
      <ion-icon [src]="isAccountSelected ? clickedAccountIcon : iconAccount" ></ion-icon>
      <!-- <ion-icon name="person-outline"></ion-icon> -->
      <ion-label>Account</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

下面是tabs.page.ts

export class TabsPage implements OnInit {
  iconHome = '../../assets/icon/custom-icon/tabs/line/Home.svg';
  clickedHomeIcon = '../../assets/icon/custom-icon/tabs/solid/Home.svg';
  iconJob = '../../assets/icon/custom-icon/tabs/line/Case.svg';
  clickedJobIcon = '../../assets/icon/custom-icon/tabs/solid/Case.svg';
  iconNotification = '../../assets/icon/custom-icon/tabs/line/Bell.svg';
  clickedNotificationIcon = '../../assets/icon/custom-icon/tabs/solid/Bell.svg';
  iconAccount = '../../assets/icon/custom-icon/tabs/line/User.svg';
  clickedAccountIcon = '../../assets/icon/custom-icon/tabs/solid/User.svg';

  isAccountSelected = false;
  isNotificationSelected = false;
  isJobSelected = false;
  isHomeSelected = true;

  private activeTab?: HTMLElement;

  constructor() {
    this.isAccountSelected = false;
    this.isNotificationSelected = false;
    this.isJobSelected = false;
    this.isHomeSelected = true;
  }

  ngOnInit() {
  }

  changeAccountIcon(): void {

    this.resetAll();
    this.isAccountSelected = true;
    console.log('account')
    console.log(this.isAccountSelected);
  }

  changeNotificationIcon(): void {

    this.resetAll();
    this.isNotificationSelected = true;
    console.log('notif')
    console.log(this.isNotificationSelected);
  }

  changeHomeIcon(): void {

    this.resetAll();
    this.isHomeSelected = true;
    console.log('home')
    console.log(this.isHomeSelected);
  }

  changeJobIcon(): void {
    this.resetAll();
    this.isJobSelected = true;
    console.log('job')
    console.log(this.isJobSelected);
  }

  resetAll() {

    this.isAccountSelected = false;
    this.isNotificationSelected = false;
    this.isJobSelected = false;
    this.isHomeSelected = false;
    console.log('reset')
  }


  tabChange(tabsRef: IonTabs) {
    this.activeTab = tabsRef.outlet.activatedView.element;
  }

  ionViewWillLeave() {
    // this.propagateToActiveTab('ionViewWillLeave');
  }

  ionViewDidLeave() {
    this.propagateToActiveTab('ionViewDidLeave');
  }

  ionViewWillEnter() {
    this.propagateToActiveTab('ionViewWillEnter');
  }

  ionViewDidEnter() {
    this.propagateToActiveTab('ionViewDidEnter');
  }

  private propagateToActiveTab(eventName: string) {
    if (this.activeTab) {
      this.activeTab.dispatchEvent(new CustomEvent(eventName));
    }
  }

}

这是标签路由模块上的路由

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        loadChildren: () => import('../home/home.module').then(m => m.HomePageModule)
      },
      {
        path: 'construction',
        loadChildren: () => import('../construction/construction.module').then(m => m.ConstructionPageModule)
      },
      {
        path: 'construction2',
        loadChildren: () => import('../construction/construction.module').then(m => m.ConstructionPageModule)
      },
      {
        path: 'profile',
        loadChildren: () => import('../profile/profile.module').then(m => m.ProfilePageModule)
      },
      {
        path: 'setting',
        loadChildren: () => import('../setting/setting.module').then(m => m.SettingPageModule)
      },
      {
        path: 'status',
        loadChildren: () => import('../status/status.module').then(m => m.StatusPageModule)
      },
      {
        path: 'job',
        loadChildren: () => import('../job/job.module').then(m => m.JobPageModule)
      },
      {
        path: 'myjob',
        loadChildren: () => import('../myjob/myjob.module').then(m => m.MyjobPageModule)
      },
      {
        path: '',
        redirectTo: '/tabs/home',
        pathMatch: 'full'
      }
    ]
  }
];