Dans angular2, comment obtenir onChanges pour les propriétés modifiées sur un objet envoyé un @Input

J'ai une directive et c'est un @Input qui accepte une classe. 

@Directive({selector: 'my-directive'})
@View({directives: [CORE_DIRECTIVES]})
export class MyDirective  {
    @Input() inputSettings : SettingsClass;
    @Input() count : number;

   onChanges(map) {
      console.log('onChanges');
    }
}

La directive est utilisée en html:

  ...
  <my-directive [input-settings]="settings" [count]="settings.count"></my-directive>
  ...

Si les paramètres.le comte est changé, l' onChanges le feu. Si toute autre propriété sur les paramètres de changements de classe, il ne sera pas le feu.

Comment puis-je détecter si il y a un changement de propriété de tout sur paramètres?

  • Je suppose que ça (pour l'instant?) ne fonctionne pas... peut-être parce que inputSettings contient une référence à une instance d'un objet et étant donné que la référence elle-même ne change pas, Angulaire n'a probablement pas essayer de comparer les propriétés de l'objet de sorte qu'il ne voit pas ou signaler un changement. (J'espère que je me trompe, ou j'espère qu'ils vont résoudre ce problème.)
  • En effet, Victor Savkin du blog confirmé mes suppositions: "Si l'adresse de l'objet est mutable, un autre composant de mise à jour de la rue propriété sans créer une nouvelle adresse de l'objet. Si cela se produit, le onChanges crochet ne sera pas appelé".
  • vous pouvez également utiliser les méthodes getter et setter pour l'attribut de l'entrée de la propriété
  • pouvez-vous nous expliquer votre exemple de code? pourquoi onChanges() jamais être appelé?
InformationsquelleAutor Peter | 2015-12-07
  1. 52

    Angulaire remarquerez seulement si l'objet a été modifié pour un autre objet (c'est à dire, la référence d'objet a été changé), donc ngOnChanges() ne peut pas être utilisé pour résoudre votre problème. Voir Victor Savkin du blog pour plus d'informations.

    Vous pourriez mettre en œuvre les ngDoCheck() méthode dans votre MyDirective classe. Le cycle de vie hook est appelé "à chaque fois que l'entrée des propriétés d'un composant ou d'une directive sont vérifiées. L'utiliser pour étendre la détection de changement en effectuant une coutume vérifier."

    Pour mettre en œuvre votre personnalisé méthode de contrôle, vous avez d'abord besoin de mettre en œuvre un .equals() méthode de la classe SettingsClass tels que vous pouvez ensuite écrire le code quelque chose comme ce qui suit dans ngDoCheck():

    ngDoCheck() {
   if(!this.inputSettings.equals(this.previousInputSettings)) {
      //inputSettings changed
      //some logic here to react to the change
      this.previousInputSettings = this.inputSettings;
   }
}
    InformationsquelleAutor Mark Rajcok