enviar - pasar parametros entre componentes angular 4

Angular2 se suscribe a los cambios en @Input en el componente hijo

Question

Tengo un componente padre e hijo. El componente primario tiene un index y lo pasa al componente secundario como @Input . Este valor de index cambia constantemente en el componente principal, y dentro de mi componente secundario, quiero ejecutar una función cada vez que el componente principal cambie el index . Esto tiene un componente deslizante que lo cambia constantemente. ¿Cómo puedo conseguir esto? He intentado con el siguiente código ( this.index.subscribe(() => ), pero entiendo que no es una función cada vez que intento inicializar la suscripción).

EDITAR: No hay ningún código relacionado en la plantilla de Child que podría afectar esto, por lo que no se proporciona. ngOnChange no parece funcionar ya que el cambio se está produciendo en la directiva en lugar de la plantilla de los parent .

Niño:

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

}

Padre:

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

Como se mencionó en la otra respuesta, puede usar el gancho de vida ngOnChanges . De la documentation Angular:

ngOnChanges: Responder después de que Angular establece una propiedad de entrada enlazada a datos. El método recibe un objeto de cambios de valores actuales y anteriores.

Consulta el siguiente ejemplo para ver cómo puedes usarlo:

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 2

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

Citar:

Angular actualiza automáticamente las propiedades enlazadas a los datos durante la detección de cambios.

Si necesita realizar algún procesamiento en la entrada, observe el método de obtener y establecer. https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-setter

De la documentación, aquí hay un ejemplo.

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

No necesitas usar un observable.

Answer 3

ngOnChange se llama cada vez que cambia un parámetro de entrada. Incluso lo tienes en tu componente Child , pero no está implementado correctamente:

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

Más detalles: documentation

Actualización : el index en el componente principal es una string . Por alguna razón se convirtió en un componente Observable en el componente secundario.