Angular2 подписка на изменения в @Input в дочернем компоненте

У меня есть родительский и дочерний компонент. Родительский компонент имеет index и передает его дочернему компоненту как @Input. Это значение index постоянно изменяется в родительском компоненте, а внутри моего дочернего компонента я хочу запускать функцию каждый раз, когда изменяется родительский компонент index. У этого есть компонент слайда, который постоянно меняет его. Как я могу это достичь? Я пробовал с приведенным ниже кодом (this.index.subscribe(() =>), но я получаю, что это не функция каждый раз, когда я пытаюсь инициализировать подписку.

EDIT: в шаблоне Child нет соответствующего кода, который может повлиять на него, поэтому он не предоставляется. ngOnChange, похоже, не работает, поскольку изменение происходит в директиве в отличие от шаблона parent.

Ребенок:

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

}

Родитель:

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) {
    }



}

Ответ 1

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

Цитата:

Angular автоматически обновляет связанные с данными свойства во время изменения Обнаружение.

Если вам нужно выполнить некоторую обработку на входе, посмотрите на get и set. https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-setter

В документации приведен пример.

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

Вам не нужно использовать наблюдаемый.

Ответ 2

Как уже упоминалось в другом ответе, вы можете использовать спасательный хук ngOnChanges. Из угловой документации:

ngOnChanges: Respond after Angular устанавливает свойство ввода с привязкой к данным. Метод получает объект изменений текущих и предыдущих значений.

Проверьте пример ниже, чтобы увидеть, как вы можете его использовать:

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

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

  private numberOfChanges: number = 0;

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

Плункер: http://plnkr.co/edit/XjD1jjCnqiFdbhpTibIe

Ответ 3

ngOnChange вызывается каждый раз, когда изменяется входной параметр. Вы даже имеете его в своем компоненте Child, но он не реализован правильно:

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

Подробнее: https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#onchanges

Обновить: index в родительском компоненте есть string. По какой-то причине он стал Observable в дочернем компоненте.