Блог

Главная - Вопросы по программированию - Предотвращение уничтожения экземпляра MatDialog

Предотвращение уничтожения экземпляра MatDialog

#javascript #angular #typescript #angular-material #mat-dialog

#javascript #угловой #typescript #angular-материал #mat-диалог

Вопрос:

В моем приложении есть кнопка, которая открывает компонент в MatDialog. В компоненте я выполняю вызовы API. При закрытии MatDialog он будет уничтожен.

Когда я открываю MatDialog во второй раз по нажатию кнопки, мне приходится снова выполнять эти вызовы api, потому что первый экземпляр был уничтожен.

Я ищу решение, при котором мой первый экземпляр MatDialog не будет уничтожен, и мне не нужно выполнять вызовы api каждый раз, когда я нажимаю на кнопку.

Мой код выглядит так:

 this.dialogBox = this.dialog.open(FilterModal, {
      data: { filters: this.dataFilters, filtersjson: this.filtersjson },
      width: '300px',
      height: 'calc(100vh - 120px)',
      panelClass: 'custom-modalbox',
      hasBackdrop: false,
      position: { top: '120px', right: '0px' }
    });
    this.dialogBox.afterClosed().subscribe(res => {
      if (res) {
        // function();
      } else {
        // function2();
      }
    });

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

1. Вместо этого, почему бы вам не кэшировать запрос API с помощью shareReplay operator .?

2. кэш не решит мою проблему. У меня есть выпадающий список в моем компоненте, в котором есть поиск ввода. Каждый раз, когда пользователь вводит, вызывается search API, и ответ сохраняется в mat-options (при начальной загрузке я загружаю только 500 ответов. если я хочу увидеть параметры, превышающие 500, мне нужно создать API поиска). при закрытии matdialog он уничтожается, при открытии его во второй раз раскрывающийся список снова отображается и загружает результат top 500, но выбранное мной значение — это ответ от этого поискового API в первом экземпляре MatDialog. Поэтому, если уничтожение matdialog предотвращено, это будет полезно.

Ответ №1:

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

Метки: