时间戳

首页 > 解决方案 > 选项卡数据未在 ionic 4 中加载动态数据

ionic-framework - 选项卡数据未在 ionic 4 中加载动态数据

问题描述

嗨，我对 Ionic 很陌生，我正在使用选项卡实现 Ionic 应用程序。在我的应用程序中有三个选项卡，每个选项卡都包含每个组件并带来动态数据（Rest API 调用）。

但是只有第一次它在下次单击选项卡数据时才获取数据没有更新（Rest API 调用没有调用），因为我写入了ngOninIt()Method。

下面是我的代码：

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

主页.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...");
  }
}

但是上面的警报方法只调用一次，我在哪里可以编写每次单击选项卡时应该调用的代码。

提前致谢 ！！！！！

标签： ionic-frameworkionic4

解决方案

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

有关更多详细信息，请参阅 https://ionicframework.com/docs/api/navigation/NavController/

推荐阅读