Angular 8中如何实现点击按钮关闭p-dialog对话框？

现有模板代码 #

已完成对话框基础配置，内部添加了自定义关闭按钮并绑定了点击事件，具体代码如下：

<p-dialog [(visible)]="displayFact" [modal]="true" [style]="[{width: '50%'}]" [baseZIndex]="1000" [draggable]="false" [resizable]="false" [closable]="true">
 <div class="card rounded">
  <div>....</div>
  <a class="btn btn-primary w-25 mx-auto rounded mb-3" (click)="closeDialog()">Close</a>
 </div> 
</p-dialog>

实现逻辑 #

p-dialog的visible属性支持双向绑定，只要修改绑定的状态变量值，就能控制对话框的显示/隐藏状态，不需要手动操作DOM节点。

操作步骤 #

• 在对应组件的TypeScript代码中，定义和模板绑定的显示状态变量：

  // 变量值为true时对话框默认显示
  displayFact = true;
  

• 实现绑定的closeDialog()方法，直接将状态变量设为false即可完成关闭：

  closeDialog() {
    this.displayFact = false;
  }
  

可选简化写法 #

如果不想为关闭逻辑单独声明方法，可以直接在模板点击事件中写内联赋值逻辑，省去TS代码的额外声明：

<a class="btn btn-primary w-25 mx-auto rounded mb-3" (click)="displayFact = false">Close</a>

注意事项 #

• 已配置的[closable]="true"属性会在对话框右上角生成原生关闭按钮，按钮的点击逻辑会自动同步修改displayFact的值，不会出现状态不同步的问题。
• 不要手动查找DOM元素修改隐藏样式，会破坏组件内部的状态管理，后续重新打开对话框时可能出现交互、样式异常。

内容的提问来源于stack exchange，提问作者ks1705