Ionic 4 ionViewDidEnter () не сработал после перехода с кнопки назад-иона

Question

Я застрял с ионными приложениями. Моя проблема в том, что я хочу refresh root page после navigated from на другой странице, нажав ion-back-button, я пытаюсь использовать события ионного жизненного цикла.

Любой, у кого проблемы с ionViewDidEnter() тоже (как в моем случае)? Как я знаю, эта функция события жизненного цикла запускается при входе на страницу, прежде чем она становится активной.

Это элементы DOM, когда страница QR становится активной:

Как видите, внутри <ion-router-outlet> есть 2 страницы,В моей ситуации <app-home-tabs> является корневой страницей. Чтобы перейти на страницу <app-my-qr> с корневой страницы, я использую this.router.navigateByUrl('/my-qr', а затем после нажатия <ion-back-button> она удаляется из DOM.

Проблема в том, что корневая страница не обновляется. Я не могу найти причину этой проблемы ..

home-tabs.router.module.ts:

Answer 1

Пожалуйста, попробуйте это. Также случилось со мной недавно.

import { ViewChild } from '@angular/core';
import { IonBackButtonDelegate } from '@ionic/angular';

...
@ViewChild(IonBackButtonDelegate) backButton: IonBackButtonDelegate;
...

ionViewDidEnter() {
    console.log('ionViewDidEnter');
    this.setUIBackButtonAction();
  }

setUIBackButtonAction() {
this.backButton.onClick = () => {
  // handle custom action here
  console.log('is back on click');
  this.router.navigate(['/home-tabs/home'])
    .then(() => {
      window.location.reload();
    });
}

Answer 2

Через пару дней я нашел причину и решение проблемы. На самом деле проблема в том, что дочерний компонент не будет обновляться / перезагружаться ... внутри <app-home-tabs> есть дочерний компонент <app-home> из (home.page.ts), который можно увидеть внутри элементов DOM.

ionViewWillEnter() не запускается в дочерних компонентах (home.page.ts).

home-tabs.router.module.ts:

После того, как просто поместите эту функцию внутри родительского компонента, который является home-tabs.page.ts, <app-home-tabs>. Он вызывает дочерний компонент для принудительного обновления. Просто используя import { Events } from '@ionic/angular';

Родительский компонент:

async ionViewDidEnter() {
    // This will be called everytime the page become active
    console.log('UpdateHome');
    this.events.publish('UpdateHome');
    ...
}

А внутри дочернего компонента:

ionViewWillEnter() {
  this.events.subscribe('UpdateHome', async () => {
      console.log('UpdateHome');
      // Update itself
      let loading = await this.loadctrl.create();
      await loading.present();
      await this.getUser();
      this.menuCtrl.enable(true);
      await loading.dismiss();
  });
}

Answer 3

Вы можете использовать

ionViewWillEnter()
{
  console.log("ionViewWillEnter entered");
}

ionViewDidEnter()
{
  console.log("ionViewDidEnter entered");
}