选项卡数据未在离子 4 中加载动态数据

Question

您好，我是 Ionic 的新手，我正在使用 Tabs 实现 Ionic App。在我的应用程序中有三个选项卡，每个选项卡包含每个组件并带来动态数据（Rest API 调用）。

但只有第一次获取数据，下次点击选项卡数据不会更新（其余 API 调用不会调用），因为我写入了 ngOninIt() 方法。

下面是我的代码：

tabs.html代码：

<ion-tabs>
  <ion-tab label="Home" icon="home" href="/tabs/(home:home)">
    <ion-router-outlet name="home"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="About" icon="information-circle" href="/tabs/(about:about)">
    <ion-router-outlet name="about"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="Contact" icon="contacts" href="/tabs/(contact:contact)">
    <ion-router-outlet name="contact"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

tabs.routing.ts

    const routes: Routes = [
      {
        path: 'tabs',
        component: TabsPageComponent,
        children: [
          {
            path: 'mustang',
            outlet: 'tab1',
            loadChildren: './mustang/mustang.module#MustangModule'
          },
          {
            path: 'camaro',
            outlet: 'tab2',
            loadChildren: './camaro/camaro.module#CamaroModule'
          },
          {
            path: 'charger',
            outlet: 'tab3',
            loadChildren: './charger/charger.module#ChargerModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/lazy-load-tabs/tabs/(tab1:mustang)'
      }
    ]

;

home.module.ts

import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild([{ path: '', component: HomePage }])
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

home.page.ts

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage implements OnInit {

  constructor() { }

  ngOnInit() {
    alert("app home tabs is clickced...");
  }
}

但是上面的alert方法只调用了一次，我在哪里可以写每次点击标签时它应该调用的代码。

提前致谢!!!!!

Answer 1

您可以使用另一个每次都会调用的生命周期事件，例如 ionViewWillEnter

详情请见 https://ionicframework.com/docs/api/navigation/NavController/

选项卡数据未在离子 4 中加载动态数据

Tabs data is not loading dynamic Data in ionic 4

ionic-framework

ionic4