question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[ionic 4] ionViewWillEnter only triggers once.

See original GitHub issue

Bug Report

Ionic Info Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)          : 4.0.5
   Ionic Framework            : @ionic/angular 4.0.0-beta.3
   @angular-devkit/core       : 0.7.2
   @angular-devkit/schematics : 0.7.2
   @angular/cli               : 6.1.2
   @ionic/ng-toolkit          : 1.0.5
   @ionic/schematics-angular  : 1.0.4

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0, ios 4.5.5

System:

   Android SDK Tools : 25.2.5
   ios-deploy        : 1.9.2
   ios-sim           : 6.1.2
   NodeJS            : v7.4.0 (/usr/local/bin/node)
   npm               : 4.0.5
   OS                : macOS High Sierra
   Xcode             : Xcode 9.4.1 Build version 9F2000

Environment:

   ANDROID_HOME : /usr/local/Cellar/android-sdk/24.4.1_1

Describe the Bug The ionViewWillEnter lifecycle (if its still called that) only triggers once. In ionic 3 the ionViewWillEnter triggered every time you navigated to the view. Now it only triggers the first time.

Steps to Reproduce Steps to reproduce the behavior:

  1. Add ionViewWillEnter to your view
public ionViewWillEnter(): void {
     console.log('hi');
}
  1. Navigate to the page
  2. Navigate to a different page
  3. Navigate again to the page with the ionViewWillEnter

Expected Behavior Expect the console.log('hi') to be logged every time I navigate to the view.

Additional Context Note that I use tabs. Is there perphaps a Angular lifecycle which replaced ionViewWillEnter?

-- tabs
     -- View 1 (with ionViewWillEnter)
     -- View 2

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:14
  • Comments:48 (12 by maintainers)

github_iconTop GitHub Comments

12reactions
dtaalberscommented, Sep 7, 2018

In the meanwhile, as a workaround, I am using below setup to mock the ionViewWillEnter event. Note that the url in the subscription should be that of the current page.

import { OnEnter } from '../on-enter';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { NavigationEnd, Router } from '@angular/router';

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit, OnEnter, OnDestroy {

    private subscription: Subscription;

    constructor(
        private router: Router
    ) { }

    public async ngOnInit(): Promise<void> {
        await this.onEnter();

        this.subscription = this.router.events.subscribe((event) => {
            if (event instanceof NavigationEnd && event.url === '/tabs/(home:home)') {
                this.onEnter();
            }
        });
    }

    public async onEnter(): Promise<void> {
        // do your on enter page stuff here
    }

    public ngOnDestroy(): void {
        this.subscription.unsubscribe();
    }
}

Custom interface

export interface OnEnter {
    onEnter(): Promise<void>;
}
7reactions
billymahmoodcommented, Nov 7, 2018

Hi guys,

any thing on this from the Ionic team yet?

Read more comments on GitHub >

github_iconTop Results From Across the Web

IONIC 4 - The event ionViewWillEnter only fires once
I already checked the life cycle and the ionViewWillEnter the event only fires once. import { Component, OnInit } from '@angular/core'; ...
Read more >
Ionic 4 Tab to page then back to Tab did not trigger ...
ionViewWillEnter : It's fired when entering a page, before it becomes the active one. Use it for tasks you want to do every...
Read more >
[ionic 4] ionViewWillEnter only triggers once. - Bountysource
The ionViewWillEnter lifecycle (if its still called that) only triggers once. In ionic 3 the ionViewWillEnter triggered every time you navigated ...
Read more >
Ionic 4 and the Lifecycle Hooks in Angular | by Paul Stelzer
Everything in ngOnInit will not be triggered because the component was already initialized. And when I want to destroy ListPage ? If you...
Read more >
What Runs First - Constructor Or Ionview...? - ADocLib
Ionic 4 Tab to page then back to Tab did not trigger ionViewWillEnter [Solved] Ionic 5 capacitor : Load the data of a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found