Strange behaviour of back button in nested view


#1

Video

I have a problem with nested view.
Back button overlays two parent component into each other (check the Video)

It happens when i use ngOnInit

ngOnInit() {
    this.loader.present();
    this.networkServices.loadAccounts().then(res => {
      
      console.log(res);
      this.handleAccounts(res);
    });
  }

here is the piece of code that i use:

@Component({
  templateUrl: 'build/pages/accounts/accounts.html'
})

export class AccountsPage {
    loader = this.loadingCtrl.create({
     content: 'Please wait...'
    });
    constructor(
        public actionSheetCtrl: ActionSheetController,
        public loadingCtrl: LoadingController,
        public networkServices: NetworkServices,
        public alertCtrl: AlertController,
        public app: App,
        public modalCtrl: ModalController,
        public navCtrl: NavController
    ) { }

    onActionSelect(account, action) {
        if (action.code !== 'More') {
            this['handleAction_' + action.code](action);
        } else {
            this.handleAction_More(account);
        }
    }
    handleAction_1002(action) {
        this.navCtrl.push(Statements, action);
    }

}

#2

Hmm, could you test something for me, could you remove the loading indicator? I have an suspicion that it is causing the issues, since it is also part of NavController.


#3

I wrapped the loader into setTimeout(()=>{},200); and it works fine now…


#4

I’ll go a bit off topic, but could you give me some advices for implementing nested views in ionic 2?