P-ダイアログonHide - primeng

Question

私は角2アプリケーションでprimengを使用してplunkrは受け入れ答え作品で提供ものの、この問題に(stackoverflow question)

が直面しているが、それは私にはありませんよシナリオ。私は、親コンポーネントからの入力に基づいてロードする独立したコンポーネントを持っています。子コンポーネントが閉じられている/隠されているときに可視性フラグを切り替える必要があります。ここで

は、コードスニペットは、コンポーネントで

<p-dialog header="Assets Management" [(visible)]="showDialog" modal="modal" [closable]="true" (onHide)="close()" appendTo="body"> 
      .. some content .. 
    </p-dialog> 

だ、私が持っている：私の親コンポーネントで

@Component({ 
    selector: 'view-car-colors', 
    templateUrl: '/view-car-colors.html', 
    inputs: ['showDialog'], 
    outputs: ["onCloseDialog"], 
}) 
export class ViewCarColorsComponent { 
    private showDialog: boolean = false; //default close 
    private onCloseDialog: EventEmitter<any> = new EventEmitter(); 

    public close(): void { 
     this.showDialog = false; 
     //emit this to its parent 
     this.onCloseDialog.emit({ hasChanges: true }); 
    } 
} 

そして最後に、私はそれが好きで呼び出しています：

<view-car-colors [showDialog]="showCarColorsDialog" (onCloseDialog)="onCarColorsCloseDialog($event)"></view-car-colors> 

showCarColorsDialogボタンのクリックに基づいて変更されます。

private onCarColorsCloseDialog($event: any): void { 
    this.showCarColorsDialog = false; 
    if ($event.hasChanges) { 
     //fetch the changes again 
     this.getCarColors(); 
    } 
} 

私は複数の場所にprimengコントロールを使用しており、それらすべてはうまく動作しますが、私はそれが原因バージョンにすることはできません確信しているので、ちょうどこの問題を持っています。 htmlファイル内

export class ViewCarColorsComponent { 
    @Output() onCloseDialog: EventEmitter<any> = new EventEmitter<any>(); 
. 
. 
. 

} 

と= "true" をモーダルモーダル= "モーダル" を変更

Answer 1

は(onAfterHide)="close()"を試してみてください。

https://github.com/primefaces/primeng/issues/956

Answer 2

実装しよう以下のような：

private _showDialog: boolean = false; 

set showDialog(_show: boolean) { 
     let result: boolean = this._showDialog != _show; 
     if (result == true) { 
      this._showDialog = _show; 
      this.onCloseDialog.emit({ hasChanges: this.hasChanges, state: this._showDialog }); 
     } 
    } 
    get showDialog(): boolean{ 
     return this._showDialog; 
    } 

と親TEMで：私の子コンポーネントで

プレート：コンポーネントで

<!--View Car Colors Dialog In Parent Component--> 
<view-car-colors [showDialog]="showCarColorsDialog" (onCloseDialog)="onCarColorsCloseDialog($event)"></view-car-colors> 

、私はEMITイベントを受け取る：

private onCarColorsCloseDialog($event: any): void { 
    let result = this.showCarColorsDialog != $event.state; 
    if (result == true) { 
     this.showCarColorsDialog = $event.state; 
     if ($event.hasChanges) { 
      this.getCarColors(); 
     } 
    } 
} 

Answer 3

onHideが働いていなかった後、私はゲッター/セッターを使用して回避策を見つけました：