Блог

Главная - Вопросы по программированию - Получить событие при возврате на текущую страницу, ионная навигация

Получить событие при возврате на текущую страницу, ионная навигация

#angular #ionic-framework

#angular #ионный фреймворк

Вопрос:

Я показываю некоторый список из api на странице-A, со страницы-A, я перехожу на страницу-B, заполняю какую-то форму и отправляю, после отправки я вернулся на страницу-A. Теперь мне нужно обновить список на странице-A.

Как я могу узнать, что я вернулся со страницы-B -> Страницы-A.

Я использую Ionic-5.

Спасибо

Комментарии:

1. Что вы пробовали до сих пор?

Ответ №1:

Вы можете добиться этого, используя концепцию событий и подписки. Как показано ниже

Шаг 1: Создайте одну службу (поставщика) с именем apphelper

Шаг 2: запустите эту команду npm i rxjs

Шаг 3: импортируйте нижеприведенные вещи в apphelper.service.ts и

     import { Subject, Subscription } from 'rxjs';

    // Events
  subscribe(topic: string, observer: (_: any) => void): Subscription {
    if (!this.channels[topic]) {
      this.channels[topic] = new Subject<any>();
    }
    return this.channels[topic].subscribe(observer);
  }

  publish(topic: string, data?: any): void {
    const subject = this.channels[topic];
    if (!subject) {
      // Or you can create a new subject for future subscribers
      return;
    }
    subject.next(data);
  }

  destroy(topic: string): null {
    const subject = this.channels[topic];
    if (!subject) {
      return;
    }
    subject.complete();
    delete this.channels[topic];
  }

Теперь импортируйте сервис на страницу A и страницу B. После этого добавьте событие щелчка в кнопку «Назад» и запустите публикацию события, как показано ниже на странице B:

  this.appHelper.publish("RELOAD_DATA");

И на странице событие подписки в конструкторе, как показано ниже:

 this.appHelper.subscribe("RELOAD_DATA", (data: any) => {
// call the function as per your requirement
    });

Комментарии:

1. да, я уже интегрировал NGXS для управления состоянием, я пытаюсь это использовать, просто любопытно, есть ли что-нибудь из коробки, предоставленной Ionic.

Ответ №2:

Вы можете использовать перехваты жизненного цикла Ionic:

ionViewWillEnter Запускается, когда компонент, направленный на, собирается анимироваться в поле зрения.

ionViewWillLeave Запускается, когда маршрутизация компонента из собирается анимироваться.

ionViewDidLeave Запускается, когда маршрутизация компонента к завершила анимацию.

ionViewDidEnter Запускается, когда маршрутизация компонента в> завершила анимацию.

Для получения дополнительной информации: Документация по перехватам жизненного цикла

Комментарии:

1. представление жизненного цикла не работает при возврате из навигации, поскольку компонент уже находится в стеке.

2. можете ли вы поделиться своим кодом маршрутизации, чтобы я мог взглянуть на него. также поделитесь своим текущим кодом жизненного цикла.

3. this.router.navigateByUrl(‘call-add’); вот как я перехожу на другой маршрут / страницу.

Ответ №3:

SERVICE booleanService

 comingFromPageB: boolean;

СТРАНИЦА B

 constructor(private booleanService: BooleanService){}

ionViewWillLeave(){
this.booleanService.comingFromPageB = true;
}

СТРАНИЦА A

 constructor(private booleanService: BooleanService){}

ionViewWillEnter(){
  if(this.booleanService.comingFromPageB){
    - Do your stuff here (delete form...)
     - Reset boolean : this.booleanService.comingFromPageB = false
   }
}
Метки: