单击时关闭 Primeng 模态框

Question

我正在查看模态框的 Primeng 文档，但找不到以编程方式关闭模态框的方法（例如，当我单击 "accept" 按钮时）。

来源：https://www.primefaces.org/primeng/#/dialog

Answer 1

如文档所示，<p-dialog> 组件有一个 [(visible)] 属性。它是双向绑定的，因此您实际上可以通过将上述属性的值设置为 false 来关闭（或隐藏）该元素。示例：

<p-dialog header="Foo" [(visible)]="showDialog">
  <p-footer>
    <button type="button" (click)="functionToCloseDialog()" label="Accept"></button>
  </p-footer>
</p-dialog>

您的 ts 文件将包含以下内容：

export class SomeComponent {
  showDialog: boolean;

  functionToCloseDialog() {
    this.showDialog = false; // closes/hides the dialog box
  }
}

Answer 2

现在你不需要使用隐藏和显示了。您需要包含 DynamicDialogRef 服务，例如：

 constructor(private ref: DynamicDialogRef) {}

 closeModal(): void {
    this.ref.close();
 }

 closeModalWithData(): void {
   // you can pass data like this
   this.ref.close(data)
   // and catch it after with onClose event
 }

单击时关闭 Primeng 模态框

Close Primeng's ModalBox when clicked

angular

typescript

modal-dialog

primeng