Angulaire 2: comment puis-je détecter les changements d'attribut pour les attributs d'entrée sur un Composant?

J'ai Angulaire à 2 Contrôleur qui ressemble à ceci:

@Component({
  selector: 'my-component',
  template: '<div>The value is: {{ value }}</div>',
})
class MyComponent implements OnInit {
  @Input()
  value: string;

  @Output
  valueChange = new EventEmitter<number>();

  ngOnInit() {
    this.valueChange.subscribe(value => {
      console.log('new value:', value); //<-- does not get triggered
    });
  }
}

Mais lorsque la valeur de value changements à partir d'un modèle de liaison:

<my-component [value]="someValue" /> <!-- valueChange not triggered! -->

La valueChange l'événement n'est pas déclenché donc, même si le modèle correctement les mises à jour et affiche la nouvelle valeur de la composante ne sait pas qu'il a été modifié.

Comment puis-je détecter lors de la saisie d'attributs sur mon contrôleur sont-elles changé?

OriginalL'auteur David Wolever | 2016-08-08

  1. 12

    À mon avis, Output est pour votre composant à émettre de l'événement à d'autres personnes afin qu'ils la jour de leur point de vue si nécessaire, il doit être utilisé uniquement pour les modifications effectuées à l'interne qui ont besoin d'être diffusé (d'où le nom de Output). Le déclenchement d'une Output événement sur Input changements peuvent provoquer un comportement inattendu (comme maintenant que valueChange est déclenché pour tous les changements, à la fois à l'intérieur et à l'extérieur, et pas vraiment une Output plus).

    Dans votre cas, si vous voulez faire des trucs quand votre value changements, vous pouvez en faire un setter:

    private _value: string;
get value(): string {
  return this._value;
}

@Input('value')
set value(val: string) {
  this._value = val;
  console.log('new value:', value); //<-- do your logic here!
}

    OriginalL'auteur Harry Ninh

  2. 7

    J'ai utilisé les poseurs de détection lorsque les variables d'entrée ont été modifiés. Vous devez utiliser le inputs clé dans la @Component décorateur au lieu de la @Input déclaration pour obtenir que cela fonctionne, comme suit:

    @Component({
  selector: 'my-component',
  template: '<div>The value is: {{ value }}</div>',
  inputs: ['value']
})
class MyComponent {
  private _value: string;

  @Output
  valueChange = new EventEmitter<number>();

  set value(value) {
    this._value = value;
    console.log('new value:', value);
    this.valueChange.emit(value);
  }

  get value(value) {
    return this._value;
  }
}

    Aussi pour info, la méthode de la classe est ngOnInit au lieu de onInit.

    Vous pouvez utiliser les entrées de la propriété sur le \@Composante décorateur ou, vous pouvez utiliser le \@décorateur d'Entrée sur l'ensemble de la propriété. Ils ont tous deux actuellement, et \@Input décorateur semble être la voie privilégiée
    Un accesseur get doit et ne peut pas avoir une valeur, vous pouvez mettre à jour votre méthode get pour get value() {} je pense que votre @output peut également avoir besoin d'être mis à jour pour @Output()

    OriginalL'auteur Joey Robert

  3. 2

    J'ai été en mesure de contourner le problème par la mise en œuvre de OnChanges:

    ngOnChanges(changes) {
  for (let key in changes) {
    if (this[key + 'Change'])
      this[key + 'Change'].emit(changes[key].currentValue);
  }
}

    Qui déclenche automatiquement l' Change cas chaque fois que les Angulaires détecte un changement... mais est-il une façon de le faire nativement?

    OriginalL'auteur David Wolever