Question

这是我的页脚组件。我从页脚栏中调用了几页，如下所示。当我点击页脚时，它正在加载陈旧的组件。我调试它，发现它没有调用组件的构造函数（我有加载逻辑来刷新数据）。我必须从页脚单击两次以调用组件以获取正确的数据

tab-footer.component.html

  <ion-tabs>
    <ion-tab [root]="home" tabIcon="md-home" 
   [rootParams]="homeparams"></ion-tab>
     <ion-tab [root]="alertsPage" tabIcon="md-notifications-outline">
    </iontab>
   <ion-tab [root]="flagged" tabIcon="flag"></ion-tab>
  </ion-tabs>


  @Component({
   selector: 'app-tab-footer',
   templateUrl: './tab-footer.component.html',
  styleUrls: ['./tab-footer.component.scss']
  })
  export class TabFooterComponent {

  home = HomeComponent;
  alertsPage = AlertsComponent;
  flagged = FlaggedComponent;
  homeparams: any;

  constructor(public navparam: NavParams) {
    this.homeparams = navparam;
   }

 }

这是我从页脚调用的其中一个组件

  @Component({
 selector: 'app-flagged',
 templateUrl: './flagged.component.html',
  styleUrls: ['./flagged.component.scss']
})
export class FlaggedComponent {

    someData1: any;
    someData:any[] = [];

    someObj = {}

 constructor(public someService: SomeServiceService,
     public exampleService: ExampleService,
     public navParams: NavParams,
     public navCtrl: NavController) {

   // some loading logic
   }

任何人都可以帮助找出每次都不调用构造函数的原因吗？我是否指定了一些属性来加载它？谢谢

Answer 1

将生命周期事件ionViewDidEnter或ionViewWillEnter添加到FlaggedComponent类，并将更新或加载逻辑从构造函数移动到其中一种方法中。

ionViewDidEnter() {
  console.log('the page has entered');
}

ionViewWillEnter() {
  console.log('the page is about to enter');
}

  当页面完全进入并且现在是活动页面时，将调用
ionViewDidEnter 。   无论是第一次加载还是缓存页面，都会触发此事件。
     当页面即将进入并成为活动页面时，将调用
ionViewWillEnter 。

参考：https://ionicframework.com/docs/api/navigation/NavController/#lifecycle-events

Ionic 2正在加载过时的组件

1 个答案: