Angular4 PrimeNG对话框作为组件

发布时间：2020-12-17 17:03:40 所属栏目：安全来源：网络整理

导读：我对一个角度/质量问题感到困惑.我是angular4的新手,我试图打开并关闭一个对话框作为一个自己的组件.我有一个list-component,其中datatable加载所有数据.如果单击某行并按下打开按钮,则应打开对话框组件.但是当我关闭对话框并想要重新打开它时,它不起作用.

我对一个角度/质量问题感到困惑.我是angular4的新手,我试图打开并关闭一个对话框作为一个自己的组件.我有一个list-component,其中datatable加载所有数据.如果单击某行并按下打开按钮,则应打开对话框组件.但是当我关闭对话框并想要重新打开它时,它不起作用.

列表component.html：

<button class="btn btn-default openBtn" type="button" 
    pButton label="Open" [disabled]="jobClosed" (click)="showDialog()">
</button>

<app-details [display]="display"></app-details>

列表component.ts

display: boolean = false;

showDialog() {
    this.display = true;
}

对话框的component.html

<p-dialog [(visible)]="display" modal="modal" [responsive]="true" 
  (onAfterHide)="onClose()">
   <p>Runs!</p>
</p-dialog>

对话框的component.ts

@Input() display: boolean;

onClose(){
    this.display = false;
}

问题是,当我单击按钮时对话框打开,但当我关闭它并想再次打开它时,它不再打开.谁知道为什么？我已经读过,我需要创建一个@Output变量并使用EventEmitter,但我不知道这是否正确以及它是如何工作的.我希望有人知道为什么在我关闭它之后对话框不再重新打开.

解决方法

我是靠自己做的.正如我所说,这里需要一个EventEmitter.

列表component.html：

<button class="btn btn-default openBtn" type="button" 
    pButton label="Open" [disabled]="jobClosed" (click)="showDialog()">
</button>

<app-details [display]="display" (displayChange)="onDialogClose($event)"></app-details>

列表component.ts：

display: boolean = false;

showDialog() {
    this.display = true;
}

onDialogClose(event) {
   this.display = event;
}

对话框的component.html：

<p-dialog [(visible)]="display" modal="modal" [responsive]="true">
   <p>Runs!</p>
</p-dialog>

对话框的component.ts：

@Input() display: boolean;
  @Output() displayChange = new EventEmitter();

  onClose(){
    this.displayChange.emit(false);
  }

  // Work against memory leak if component is destroyed
  ngOnDestroy() {
    this.displayChange.unsubscribe();
  }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!