私はangular 2アプリケーションでprimengを使用していて、この問題に直面しています (stackoverflowの質問)
受け入れられた回答で提供されたプランカーは機能しますが、私のシナリオでは機能しません。親コンポーネントからの入力に基づいてをロードする別のコンポーネントがあります。子コンポーネントが閉じている/非表示になっているときに表示フラグを切り替えたいのですが。
これがコードスニペットです
<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();
}
}
私は複数の場所でprimegingコントロールを使用しましたが、それらはすべて正常に動作しますが、この問題があるので、バージョンが原因ではない可能性があります。
(onAfterHide)="close()"
。
onHide
が機能しなかった後、次のようなゲッター/セッターを使用した回避策を見つけました。
私の子コンポーネントでは:
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;
}
そして親テンプレートでは:
<!--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();
}
}
}
試す
<p-dialog [(visible)]="displayDialog" appendTo="body">
実装してみてください:
export class ViewCarColorsComponent {
@Output() onCloseDialog: EventEmitter<any> = new EventEmitter<any>();
.
.
.
}
そして、htmlファイルのmodal = "modal"をmodal = "true"に変更します