CODEWITHSUNDEEP
javascriptandroidangularionic-frameworkionic2
Vijay Ram
Vijay Ram

Reputation: 325

Ionic 2 is loading the stale component

This is my footer component. I am calling few pages from the footer bar as follows. When i click on the footer, it is loading the stale component. i debugged it and found out it is not calling the constructor of the component (where i have the loading logic to refresh the data). i have to click twice from the footer to call the component to get the correct data

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

 }

Here is my one of the components that is called from footer

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

Can anyone help finding out why it is not calling constructor every time? Do I have specify some property to load it fresh? Thank you

Upvotes: 0

Views: 68

Answers (1)

mediaupstream
mediaupstream

Reputation: 28

Add the lifecycle event ionViewDidEnter or ionViewWillEnter to your FlaggedComponent class and move your update or loading logic from the constructor into one of those methods.

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

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

ionViewDidEnter is called when the page has fully entered and is now the active page. This event will fire, whether it was the first load or a cached page.

ionViewWillEnter is called when the page is about to enter and become the active page.

reference: https://ionicframework.com/docs/api/navigation/NavController/#lifecycle-events

Upvotes: 1

Related Questions