@hiepxanh What life cycle event in Angular is like ionViewWill/Did Enter?

Thanks @olivermuc for providing the workaround.

I tried to use it but ran into something. Sorry for the basic question.

import { Component, OnInit } from '@angular/core'
import { Router, NavigationStart } from '@angular/router'

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage implements OnInit {
  constructor(private router: Router) {
    console.log('HomePage')
    this.router.events.pipe(
          filter(event => event instanceof NavigationStart)
        ).subscribe((route: NavigationStart) => {
            console.log('Route: '+route.url)
        })
  }

  ngOnInit() {
    console.log('HomePage: ngOnInit')
  }

  ionViewDidLoad() {
    console.log('HomePage: ionViewDidLoad')
  }

  ionViewWillEnter(){
    console.log('HomePage: ionViewWillEnter')
  }

  ionViewDidEnter(){
    console.log('HomePage: ionViewDidEnter')
  }

}

I get this error: [ng] ERROR in src/app/home/home.page.ts(13,11): error TS2552: Cannot find name 'filter'. Did you mean 'File'?

I also would consider this a bug, as ionViewWill/Did Enter is an ionic feature to catch the moment a page, modal, popup, or tab etc entered (repeatedly regardless of component lifecycle). As opposed to the angular lifecycle event such as ngOnInit which really only is triggered once when the component is created. Both events make sense and have their purpose.

I need to know when someone switches from tab to tab so ionViewWill/Did Enter is required to fire each time.

Example: On tapping a tab I would like to reset the individual tab’s badge to 0;

Workaround:

 this._router.events.pipe(
      filter(event => event instanceof NavigationStart)
    ).subscribe((route: NavigationStart) => {
        // do something with   route.url    
    });

EDIT: added example EDIT2: added workaround

I wrote an article on Medium about this topic -> https://medium.com/@paulstelzer/ionic-4-and-the-lifecycle-hooks-4fe9eabb2864

At the moment (beta.15) ion-tabs stay in the stack, so after initialize a tab page, it will keep online and will not be destroyed if you switch between tabs. Maybe the ionic team changes this behaviour in future (they redesigned tabs in beta.15, so removing a tab after switching will be maybe added later).

So at the moment, you are right switching back to an tab you opened previous, will not trigger any lifecycle hooks. For me it’s not a bug (because the components aren’t destroyed or will be entered because they are still alive all time). For me adding such a behaviour would be a nice feature like @angular/material did at their tabs.

none of the life cycles events are triggering the second time you visit the tabs/other pages