Диалоговое окно Angular4 PrimeNG как компонент

Вопрос:

Я борется с проблемой угловатости /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

<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();
  }

Оцените статью
TechArks.Ru
Добавить комментарий