8

我正在努力解决角度/初始问题。我是 angular4 的新手，我正在尝试将对话框作为自己的组件打开和关闭。我有一个列表组件，其中数据表加载所有数据。如果单击一行并按下打开按钮，对话框组件应该打开。但是当我关闭对话框并想要重新打开它时，它不起作用。

列表组件.html：

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

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

列表组件.ts

display: boolean = false;

showDialog() {
    this.display = true;
}

对话框组件.html

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

对话框组件.ts

@Input() display: boolean;

onClose(){
    this.display = false;
}

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

4

1 回答 1

15

我自己做的。正如我所说，这里需要一个 EventEmitter。

列表组件.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>

列表组件.ts：

display: boolean = false;

showDialog() {
    this.display = true;
}

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

对话框组件.html：

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

对话框组件.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();
  }
于 2017-11-03T13:59:15.580 回答