web-dev-qa-db-fra.com

p-dialogue sur masquer ne fonctionne pas dans le composant angulaire 2 - primeng

J'utilise primeng dans une application angulaire 2 et je fais face à ce problème (question de stackoverflow)

Bien que le plunkr fourni dans la réponse acceptée fonctionne, il ne fonctionne pas dans mon scénario. J'ai un composant séparé qui charge le basé sur une entrée du composant parent. Je souhaite activer/désactiver l'indicateur de visibilité lorsque le composant enfant est fermé/masqué.

Voici l'extrait de code 

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

En composant, j'ai:

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

Et enfin, dans mon composant parent, je l’appelle comme suit:

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

Où showCarColorsDialog est modifié en fonction d'un clic de bouton.

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

J'ai utilisé les commandes primeng à plusieurs endroits et elles fonctionnent toutes correctement, mais ce problème ne peut que découler de la version.

angularangular2-templateprimeng
5
Mirza Ali Baig

essayez (onAfterHide)="close()".

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

2
XeNo13GrIn

Après que onHide n'ait pas fonctionné, j'ai trouvé une solution de contournement en utilisant getter/setter comme:

Dans mon composant enfant:

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

Et dans le modèle parent:

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

En composant, je reçois l'événement emit:

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

essayer de mettre en œuvre:

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

}

et changez modal = "modal" en modal = "true" dans un fichier html

0
Tima Root