Duplicated ngAfterViewInit call for ionic 2 RC3 Tabs component

Ionic Framework ionic-v3
1

When i try to call this.nav.setRoot(TabsPage) or this.nav.push(TabsPage), the ngAfterViewInit callback is calling twice on the TabsPage (page with Tabs component). And the child tab page creates twice.

This problem happen only when i try to navigate from Push plugin notification callback.

Does anyone have any idea?

Related code:

var push = PushNotification.init({
    android: {
        senderID: "12345679"
    },
    browser: {
        pushServiceURL: 'http://push.api.phonegap.com/v1/push'
    },
    ios: {
        alert: "true",
        badge: true,
        sound: 'false'
    },
    windows: {}
});
push.on('notification', => (data) {
  this.navCtrl.push(TabsPage, { data: data }); // or this.navCrtl.setRoot(...). it does not metter.
});

Ionic info:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.12
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v6.6.0
Xcode version: Not installed
2

What is the content of TabsPage? is this you base layout with tabs inside?

3

TabsPage has a very simple layout. And TabsPage does not set as rootPage for base application object.

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { IssueItem } from './issue-item';
import { Comments } from '../comments/comments';
import { Attachments } from '../attachments/attachments';

@Component({
  selector: 'page-issue-item-tabs',
  template: `
  <ion-tabs [selectedIndex]="selectedTabIndex" color="primary">
    <ion-tab [root]="tab1" [rootParams]="tabsParams" tabTitle="Info" tabIcon="information-circle"></ion-tab>
    <ion-tab [root]="tab2" [rootParams]="tabsParams" tabTitle="Comments" tabIcon="chatbubbles" [tabBadge]="commentsCount"></ion-tab>
    <ion-tab [root]="tab3" [rootParams]="tabsParams" tabTitle="Files" tabIcon="attach" [tabBadge]="attachmentsCount"></ion-tab>
  </ion-tabs>
  `
})
export class TabsPage {
  issueId: number;
  tabsParams: any;
  commentsCount: number = 0;
  attachmentsCount: number = 0;
  selectedTabIndex: number = 0;
  tab1 = IssueItem;
  tab2 = Comments;
  tab3 = Attachments;

  constructor(public nav: NavController, public params: NavParams) {
    console.log('init Tab page')
    this.setTab(params.get('tab'));
  }

  setTab(selectedTab: any): void {
    if(!selectedTab) return;
    switch(selectedTab){
      case 'information':
        this.selectedTabIndex = 0;
        break;
      case 'comments':
        this.selectedTabIndex = 1;
        break;
      case 'files':
        this.selectedTabIndex = 2;
        break;
    }
  }
}
4

I am seeing very similar behaviour - my tabs selected getting messed up with same approach - did you find a resolution for your issue?

5

Try temporary solution from this thread https://github.com/driftyco/ionic/issues/9377

6

As suggested by https://github.com/driftyco/ionic/issues/9377#issuecomment-263221516 I used this approach which worked for me:

Curious workaround:
<ion-tabs *ngIf=“displayTabs”> etc…
ionViewDidEnter() {
this.displayTabs = true
}

Without doing this, tabs inits twice, starts the root page of tab 0 twice, but the second copy doesn’t have a tabbar and seems to be pushed onto the nav stack.

an earlier github response suggests that non-root tabs are not supported and that you should use segments? ( https://github.com/driftyco/ionic/issues/7364#issuecomment-235393132 )

1 Like
7

This error occurred on lazy load tabs and this “Curious workaround (rsrs)” resolve my problem, tanks @localshop
Works fine!!!

Version:
“ionic-angular”: "3.6.0"
“ionic”: “3.9.2”