2
votes

Fonction de déclenchement sur @Input () modifiée

J'ai un composant parent avec le code suivant dans le parent.component.html:

getSpecs()

Dans le composant enfant, j'ai le paramètre d'entrée comme celui-ci:

@Input() idElement : number;

Et aussi une fonction appelée

<app-child [idElement]=(idElement)></app-child>

Je veux que la fonction getSpecs () soit exécutée par l'enfant quand l'entrée est modifiée par le parent. Est-ce possible?

angular input components parent

2 commentaires

angularfirebase.com/lessons/…

Comme ceci: stackoverflow.com/q/38571812/4636715 ?

3 Réponses :

7
votes

Pour cela, vous devez utiliser le hook de cycle de vie angulaire ngOnChanges .

Dans votre cas, ce serait quelque chose comme:

ngOnChanges(changes: SimpleChanges) {
    if (changes['idElement']) {
        // Do your logic here
        this.getSpecs()
    }
}

La documentation est ici .

0 commentaires

1
votes

Vous pouvez essayer ceux-ci

Importez OnChanges depuis le package angular core dans votre composant enfant

import {Component, Input, OnChanges, SimpleChanges} depuis '@ angular / core';
Implémentez votre classe enfant comme

classe d'exportation YourComponent implémente OnChanges

Créez une méthode OnChanges comme

ngOnChanges(changes:SimpleChanges){
  console.log(changes.your input property name);
 // implement your logic here  
}

Chaque fois que vous avez des modifications dans le composant parent, cela affectera le composant enfant

0 commentaires

2
votes

Il existe une autre option sans OnChanges.

@Component({
    selector: 'app-child',
    template: '<div></div>'
})
export class AppChildComponent {
    private _idElement: number;

    get idElement(): number {
        return this._idElement;
    }

    @Input('idElement') set idElement(value: number) {
        if (value) {
            this._idElement = value;
            this.getSpecs();
        }
    }
}

J'espère que cela vous aidera! :)

0 commentaires