Angular4 PrimeNG 대화 상자로 구성 요소

Question

각도/primeng 문제로 어려움을 겪고 있습니다. 나는 angular4와 새로운 오전 및 나는 자신의 구성 요소로 대화 상자를 열고 닫으려고합니다. 난 리스트 구성 요소 어디 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

대화-component.ts

@Input() display: boolean; 

onClose(){ 
    this.display = false; 
} 

문제는 내가 버튼을 클릭하면 대화 상자가 열립니다이지만, 내가 그것을 닫고 다시 열고 자 할 때, 그것은 더 이상 열리지 않습니다. 왜 그런지 압니까? 나는 @Output 변수를 생성하고 EventEmitter를 사용해야한다는 것을 읽었지만, 이것이 사실인지 어떻게 작동 하는지를 모른다. 한 번 닫은 후에도 대화 상자가 다시 열리지 않는 이유를 알고 계실 수 있습니다.

Answer 1

나는 혼자서 만들었다. 여기에 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(); 
    }