исправить «Angular - Ant Design Modal Dialog» - кнопка «Отмена» автоматически вызывает проблему - PullRequest
Новая
       3

исправить «Angular - Ant Design Modal Dialog» - кнопка «Отмена» автоматически вызывает проблему

0 голосов
/ 12 апреля 2019

Я использую библиотеку пользовательского интерфейса Ant Design в своем проекте Angular.Из этой библиотеки я использую ее модальный компонент в своем проекте.Я использовал различные типы модальных на одной странице.Я также установил его свойство, такое как модальное значение не должно закрываться при нажатии кнопки «Esc».

Его документацию можно найти по этой ссылке!

Таким образом, всякий раз, когда загружается угловой проект илиего страница обновляется, затем вызывается конструктор модала и метод ngOnInit () для каждого модала, присутствующего на этой странице.Из-за этого всякий раз, когда я нажимаю кнопку «Esc», появляется анимация закрытия модала, хотя модал все еще не открыт.

Вот мой код, где я использовал флаг для установки значения «[nzKeyboard] 'из моего файла машинописного текста, так что изначально кнопка «Esc» будет работать, и всякий раз, когда модал выполняет какую-либо асинхронную обработку, я изменяю значение флага так, чтобы во время асинхронного процесса модал «Esc»кнопка не будет работать.

Код HTML-файла: 

<nz-modal
  [(nzVisible)]="isVisible"
  (nzOnCancel)="handleCancel()"
  (nzOnOk)="handleCreate()"
  [nzOkLoading]="isOkLoading"
  [nzMaskClosable]="!onAsyncProcess"
  [nzClosable]="!onAsyncProcess"
  [nzKeyboard]="!onAsyncProcess"
>
...
</nz-modal>

Код файла машинописного текста: 

onAsyncProcess = false;

async handleCreate() {
   this.isOkLoading = true;
   this.onAsyncProcess = true;

   ... // Async Process

   this.onAsyncProcess = false;
   this.isVisible = false;
   this.isOkLoading = false;
}

handleCancel(): void {
   this.isVisible = false;
}

Таким образом, вывод должен быть таким, как и всякий раз, когда страницазагружается, и пользователь нажимает кнопку «Esc», не открывая модальный режим, затем при нажатии кнопки «Esc» не следует вызывать «handleCancel ()», а анимация его закрытия также не должна воспроизводиться.

...