Angular2订阅对子组件中@Input的更改

Question

我有一个父子组件。父组件具有index，并将其作为@Input 传递给子组件。这个index 值在父组件中不断变化，在我的子组件中，我想在每次父组件更改index 时运行一个函数。这有一个不断改变它的幻灯片组件。我怎样才能做到这一点？我已尝试使用以下代码 (this.index.subscribe(() =>)，但每次尝试初始化订阅时，它都不是一个函数。

编辑：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) {
    }



}

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

你不需要使用 observable。

Answer 2

正如另一个答案中提到的，您可以使用ngOnChanges life hook。来自 Angular 的documentation：

ngOnChanges：在 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++;
  }
}

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

Answer 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。

Answer 4

将变化的值“转换”为可观察的另一种解决方案应该是

@Input() status: Status;
private status$: Subject<Status>;

constructor() {
    this.status$ = new Subject<Status>();
}

ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {

    this.status.next(this.status);
}