Limit Page Access And Redirect to Other Page

Ionic Framework ionic-v3
2

AFAIK, the error is because the component is killed before it is fully loaded, so change detection does not get torndown properly.

Here are the Angular 2 and Ionic 2 Lifecycle loading hooks in the order that they trigger.

// Removed the if (this.auth.isPremium())... conditional for brevity
  ionViewLoaded() {
    console.log('ionViewLoaded');
    // this.nav.setRoot(LoginPage); // Error!  
  }
  ngOnInit() {
    console.log('ngOnInit');
    // this.nav.setRoot(LoginPage); // Error! 
  }
  ngAfterContentInit() {
    console.log('ngAfterContentInit');
    // this.nav.setRoot(LoginPage); // Error! 
  }
  ngAfterViewInit() {
    console.log('ngAfterViewInit');
    this.nav.setRoot(LoginPage); // Works!
  }
  ionViewWillEnter() {
    console.log('ionViewWillEnter');
    // this.nav.setRoot(LoginPage);  // Works!
  }
  ionViewDidEnter() {
    console.log('ionViewDidEnter');
    // this.nav.setRoot(LoginPage);  // Works! But produces a flash of content
  }

For my project, I’m currently using ngAfterViewInit until routing is enabled at which point I’ll look into using a Router Outlet and @CanActivate().

4 Likes