ionViewCanEnter In Components

Question

Interesting issue I’ve run into: when including a component or page in another page it seems that ionViewCanEnter isn’t firing. If you access a page directly, it’ll fire, but including it in another page using its selector causes it not to fire. I tried making a component and including that in a page and it’s not working. I need a special view on two pages and, trying to reuse code, decided to move my code to a component and include that in both pages, but the issue is that the HTML template calls a function and that function requires some async data before it can respond so I need to have the view held back until I receive that data. Any ideas on how to solve this?

Here’s my component:

import { Component } from '@angular/core';

/**
 * Generated class for the PageStylesComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'page-styles',
  templateUrl: 'page-styles.html'
})
export class PageStylesComponent {

  text: string;

  constructor() {
    console.log('Hello PageStylesComponent Component');
    this.text = 'Hello World';
  }

  ionViewCanEnter(): boolean | Promise<any> {
    return this.auth();
  }

  auth() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(true);
      }, 2000);
    });
  }

}

HTML for component:

{{text}} I have this imported to another page as so:

<ion-col col-4>
  <page-styles></page-styles>   
</ion-col>

When running this other page, I get Hello World printed immediately. Further, console does not show that the ionViewCanEnter is fired. I get:

Hello PageStylesComponent Component ionViewDidLoad EditStylesPage (The other page)

But no ionViewCanEnter from my component. I’ve been doing tons of research and can’t find a solution.

CLI Info:

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils : 1.19.2 ionic (Ionic CLI) : 3.20.0 global packages:

cordova (Cordova CLI) : 8.0.0 local packages:

@ionic/app-scripts : 3.1.2 Cordova Platforms : android 7.0.0 ios 4.5.4 Ionic Framework : ionic-angular 3.9.2 System:

Android SDK Tools : 26.1.1 ios-deploy : 1.9.2 Node : v8.10.0 npm : 5.6.0 OS : macOS High Sierra Xcode : Xcode 9.4.1 Build version 9F2000 Misc:

backend : pro Thanks for your help!

Tomislav Stankovic Tomislav Stankovic · Accepted Answer · 2018-07-19T18:51:19

Add @ViewChild so you can access the component.

@Component({
    selector: 'parent-page',
    templateURL: 'parent-page.html'
})
export class ParentPage{
    @ViewChild('myComponent') myComponent;

    constructor(){}

    ionViewCanEnter(){
        this.myComponent.someFunc();
    }

    ...
}

and

<ion-content>
    ...
    <child-component #myComponent></child-component>
    ...
</ion-content>

Source: https://ionicframework.com/docs/api/navigation/NavController/

Navigating from the Root component What if you want to control navigation from your root app component? You can't inject NavController because any components that are navigation controllers are children of the root component so they aren't available to be injected.

By adding a reference variable to the ion-nav, you can use @ViewChild to get an instance of the Nav component, which is a navigation controller (it extends NavController). - NavController

ionViewCanEnter In Components

1 Answers