Я использую библиотеку пользовательского интерфейса 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>
Код файла машинописного текста:
isOkLoading: boolean;
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 ()», а анимация его закрытия также не должна воспроизводиться.