Angular2 abonneren op wijzigingen in @Input in onderliggende component

Ik heb een ouder- en een kindcomponent. Bovenliggende component heeft indexen geeft deze door aan de onderliggende component als een @Input. Deze waarde van indexverandert voortdurend in de bovenliggende component, en binnen mijn onderliggende component wil ik een functie uitvoeren telkens wanneer de bovenliggende component indexverandert. Dit heeft een dia-component die deze constant verandert. Hoe kan ik dit bereiken? Ik heb het geprobeerd met de onderstaande code (this.index.subscribe(() =>), maar ik begrijp dat het niet elke keer een functie is als ik het abonnement probeer te initialiseren.

EDIT: er is geen gerelateerde code in de Child-sjabloon die hierop van invloed kan zijn, dus deze wordt niet verstrekt. ngOnChangelijkt niet te werken omdat de wijziging plaatsvindt in de richtlijn in tegenstelling tot de sjabloon van de parent.

Kind:

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

Ouder:

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

Antwoord 1, autoriteit 100%

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

Om te citeren:

Angular werkt gegevensgebonden eigenschappen automatisch bij tijdens wijziging
detectie.

Als je wat bewerkingen op de invoer moet doen, kijk dan naar de get en set.
https://angular.io /docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-setter

Hier is een voorbeeld uit de documentatie.

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

U hoeft geen waarneembaar bestand te gebruiken.

Antwoord 2, autoriteit 38%

Zoals vermeld in het andere antwoord, kunt u ngOnChangeslife hook gebruiken. Uit de documentatievan Angular:

ngOnChanges: Reageer nadat Angular een gegevensgebonden invoereigenschap heeft ingesteld.
De methode ontvangt een wijzigingsobject van huidige en vorige waarden.

Bekijk het onderstaande voorbeeld om te zien hoe u het kunt gebruiken:

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

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

Antwoord 3, autoriteit 22%

ngOnChangewordt aangeroepen telkens wanneer een invoerparameter verandert. Je hebt het zelfs in je Child-component, maar het is niet correct geïmplementeerd:

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

Meer details: https://angular.io /docs/ts/latest/guide/lifecycle-hooks.html#!#onchanges

Update: indexin de bovenliggende component is een string. Om de een of andere reden werd het een Observablein de onderliggende component.

Antwoord 4, autoriteit 5%

Een andere oplossing voor het “transformeren” van de veranderende waarde in een waarneembare zou moeten zijn

@Input() status: Status;
private status$: Subject<Status>;
constructor() {
    this.status$ = new Subject<Status>();
}
ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {
    this.status.next(this.status);
}