Abonnement Angular2 aux modifications apportées à @Input dans le composant enfant

Question

J'ai un parent et son enfant composant. Composant Parent a index et passe à l'enfant composant comme un @Input. Cette index de la valeur change constamment dans le composant parent, et à l'intérieur de mon composant enfant, je veux exécuter une fonction à chaque fois que le composant Parent change index. Cela a une diapositive composant qui change constamment d'elle. Comment puis-je y parvenir? J'ai essayé avec le code ci-dessous (this.index.subscribe(() =>), mais je suis arriver que ce n'est pas une fonction à chaque fois que j'essaie et initialiser l'abonnement.

EDIT: Il n'y a pas de code lié à l' Child modèle qui pourrait avoir un impact, de sorte qu'il n'est pas fourni. ngOnChange ne semble pas fonctionner, car le changement qui se passe dans la directive, par opposition à l' parents'modèle.

Enfant:

import {Component, OnInit, ViewChild, Input} from '@angular/core';
import {Observable} from 'rxjs/Observable';

@Component({
    selector: "child",
    templateUrl: "components/child/child.html",
})

export class ChildComponent implements OnInit {
    @Input() index: string;
    currentIndex: any;

    constructor() {}

    ngOnInit() {}

    ngOnChanges(){}

    ngAfterViewInit() {
        console.log("index " + this.index);
        this.currentIndex = this.index.subscribe(() => {
             console.log("index " + this.index);
        })
    }

    ngOnDestroy() {
        this.currentIndex.unsubscribe();
    }

}

Parent:

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {Page} from "ui/page";
import {ChildComponent} from '/components/child/child.component'

@Component({
    selector: "parent",
    template: "<child [index]="index"></child>",
    directives: [ChildComponent]
})

export class ParentComponent implements OnInit {

    index: string = "0,1";

    constructor(private page: Page) {
    }



}

Answer 1

https://angular.io/docs/ts/latest/api/core/index/Input-var.html

Pour citer:

Angulaire automatiquement les mises à jour de données-propriétés liées au changement de cap la détection.

Si vous avez besoin d'effectuer un traitement à l'entrée, à regarder le get et set. https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-enfant-setter

À partir de la documentation, voici un exemple.

import { Component, Input } from '@angular/core';
@Component({
  selector: 'name-child',
  template: `
    <h3>"{{name}}"</h3>
  `
})
export class NameChildComponent {
  _name: string = '<no name set>';
  @Input()
  set name(name: string) {
    this._name = (name && name.trim()) || '<no name set>';
  }
  get name() { return this._name; }
}

Vous n'avez pas besoin d'utiliser une observable.

Answer 2

Comme mentionné dans la réponse à faire, vous pouvez utiliser ngOnChanges de vie de crochet. Angulaires de la documentation:

ngOnChanges: Répondre après Angulaire des ensembles de données liée à l'entrée de la propriété. La méthode reçoit un objet de modifications actuelles et les valeurs précédentes.

Vérifiez l'exemple ci-dessous pour voir comment vous pouvez l'utiliser:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'child',
  template: `
    Value:
    <span>{{ value }}</span>
    <br />
    <br />
    Number of changes: {{ numberOfChanges }}
  `
})
export class ChildComponent {
  @Input() value: any;

  private numberOfChanges: number = 0;

  ngOnChanges() {
    this.numberOfChanges++;
  }
}

Plunker: http://plnkr.co/edit/XjD1jjCnqiFdbhpTibIe

Answer 3

ngOnChange est appelée chaque fois qu'un paramètre d'entrée change. Vous même avez dans votre Child de la composante, mais il n'est pas correctement mis en œuvre:

ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {
  // check the object "changes" for new data
}

Plus de détails: https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#onchanges

Mise à jour: index dans le composant parent est un string. Pour une raison quelconque, il est devenu un Observable dans le composant enfant.