如何从 Angular 中的父组件打开本机 HTML 对话框？

Answer 1

我没有检查过，但你的代码应该类似于：

在你的父组件.ts中：

...
isShowModalInChildComponent = false;

openModalWindowInChildComponent(): void {
  isShowModalInChildComponent = true;
}
...

在您的父组件.html 中：

...
<button (click)="openModalWindowInChildComponent()">
    New message
</button>

<app-modal 
  [isShowDialog]="isShowModalInChildComponent"
  modalTitle="New message"
>
  ...
</app-modal>

在你的模态组件.ts中：

@Input('isShowDialog')
set _isShowDialog(data: boolean) {
  this.isShowDialog = data;
}
isShowDialog = false;

在模态组件.html 中：

<dialog 
  #modal 
  *ngIf="isShowDialog"
  class="max-w-screen-xl border rounded-t-lg"
>
  <button (click)="modal.close()">
  rest of markup....
</dialog>