![](/img/trans.png)
[英]How to Make a Button in the Header of Dialog Component in PRIMENG in Angular4
[英]Angular4 PrimeNG dialog as component
我对一个角度/质量问题感到困惑。 我是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();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.