Обработка принудительной повторной загрузки Angular компонента при закрытии модального окна - PullRequest
Новая
       7

Обработка принудительной повторной загрузки Angular компонента при закрытии модального окна

1 голос
/ 14 июля 2020

В моем приложении Ionic / Angular у меня есть ситуация, когда я загружаю модальное окно, а затем, когда модальное окно закрывается, я повторно загружаю свой основной компонент. Проблема, с которой я столкнулся, заключается в том, что, исходя из того, как Angular обрабатывает загрузку компонентов, это действие фактически не приведет к повторной загрузке / перемонтированию моего основного компонента. Это просто покажет компонент в том состоянии, в котором он существует в стеке. Это не сработало в моем случае использования, потому что мне нужно повторно загрузить компонент, чтобы запустить некоторый logi c для обновления данных, которые только что изменились в зависимости от того, что произошло в модальном окне.

I нашел способ справиться с этим, но он кажется довольно хакерским. В основном при закрытии модального окна я вызываю службу следующим образом: 

  async closeModal() {
    await this.modalCtlr.dismiss();
    this.navService.navigateHome();
  }

И в своей служебной функции я бы в основном использовал увеличиваемое значение, чтобы принудительно перезагрузить компонент, например: 

  navigateHome() {
    const incCount = this.counter += 1;
    this.navCtlr.navigateRoot(`/main/${incCount}`);
  }

Это работает, но, как я уже сказал, кажется довольно хакерским. Есть ли встроенный Angular способ справиться с этим - чтобы компонент перезагружался при возникновении такого события, как закрытие модального окна?

Ответы [ 2 ]

1 голос
/ 14 июля 2020

Вы упомянули, что это проект Ionic / Angular. В этом случае Ioni c имеет некоторые дополнительные встроенные функции, которые могут быть полезны именно в таких сценариях ios.

В вашем случае использования ionViewWillEnter(), скорее всего, решит проблему. Это входит в ваш основной файл компонента. Все, что вам нужно сделать, это вызвать функцию (ы), которые вам нужно загрузить туда, например: 

runUpdateLogic() {
 // do something necessary here
}

ionViewWillEnter() {
  this.runUpdateLogic();
}

Обратите внимание, чтобы использовать эту реализацию, вы также захотите использовать Ioni c. navController, чтобы вернуться к основному компоненту, который, как я вижу, вы уже используете. Теперь это будет выглядеть так: 

  async closeModal() {
    await this.modalCtlr.dismiss();
    this.navCtlr.navigateRoot(`/main`);
  }

Это работает, потому что, хотя в вашем случае использования Angular ngOnInit() не будет срабатывать в вашем основном компоненте при закрытии модального окна, Ioni c s ionViewWillEnter() будет.

1 голос
/ 14 июля 2020

Переместите код инициализации вашего компонента в отдельный метод, и когда вы закроете модальное окно, вызовите этот метод снова.

Например, если у вас было что-то вроде этого: 

ngOnInit() {
  this.data = somethingFromAService();
  this.someOtherVar = "cool";
}

Изменить на это 

initComponent() {
  this.data = somethingFromAService();
  this.someOtherVar = "cool";
}

ngOnInit() {
 this.initComponent();
}

callSomeModal() {
   // assumes the modal has some sort of promise it returns on close, I'm just guessing because there was no example code
   modal.open().then(returnValue => {
      this.initComponent();
   })
}
...