Why do Ionic Lifecycle hooks (ionViewWillEnter, ionViewWillLeave) not fire when used as HTML Selector?

user_19118014 0
Viewed 425

I am working on an Angular Project, with Ionic 4.

When Child Page is called from Parent Page's HTML using HTML Selector, child page's Ionic Lifecycle Hooks do not fire. Why is it so? How do I use these hooks?

Child Page:

@Component({
  selector: 'app-child',
  templateUrl: './child.page.html',
  styleUrls: ['./child.page.scss']
})

export class ChildPage {

     ionViewWillEnter() {
         console.log(`ionView-Will-Enter`);
         // Code goes here...
     }

     ionViewWillLeave() {
         console.log(`ionView-Will-Leave`);
         // Code goes here...
     }
}

Parent HTML:

<ng-container>
    <app-child></app-child>
</ng-container>
angularjs-directive ionic4 ionic-framework angular typescript
1 Answers

Ionic Page lifecycles executes on routing components, so you have to use routes in order to this work. Chek it here.

Of course you can use the Angular lifecycle hooks in this case.

Note that you can load components/pages to your template via selector and via routes.

EDIT:

Here you have a stackblitz to make some test. Note the logs provided by execution of Angular example component lifecycle hook OnInit and the Ionic pages lifecycles.

I've added logs for ngOnInit, ngAfterViewInit, and ngOnDestroy Angular lifecycles hooks to the stackblitz. You can see that works fine and maybe this ones fits your needs.

user_21219570
Related