Question

假设我们将组件A作为父组件，将组件B作为子组件。子项具有父项提供的输入what_is_x。像这样：

对于父母：

@Component({
  selector: 'cmp-A',
  directives: [ComponentB],
  template: `<cmp-B [what-is-x]="x"></cmp-B>`
})
export ComponentA {
  public x: any = [1, 2, 3];
  constructor() {
    setTimeout(() => this.x.push(10), 2000);
  }
}

对于孩子：

// component B with input what_is_x
@Component({
  selector: 'cmp-B',
  template: `{{what_is_x}}`
})
export ComponentB {
  @Input('what-is-x') public what_is_x: any;
}

我的问题是，如果家长通过某种方式更改x，孩子是否会使用新值更新？根据开发者指南中的“组件通信”章节（尚未发布）;这应该！但它没有为我更新，到目前为止尝试了所有测试版（0,1,2）

Answer 1

更新：从测试版16开始，{{what_is_x}}现在将在视图中更新，即使数组引用没有更改。另请参阅{{myArray}} now updates in the view as of beta.16。

原始回答：

默认更改检测算法通过在更改检测运行中按引用比较绑定属性值来查找差异。 - doCheck() API doc

正如@Eric在评论中提到的那样，您在视图中没有看到任何更新的原因是因为您只绑定了模板中的数组 - {{what_is_x}} - 并且因为数组引用在修改数组时不会改变（例如，使用push()），更改检测不会检测到任何更改。

如果这确实是您的用例，请按@Eric建议并返回不同的数组，然后更改检测会注意到数组引用已更改。

通常，我们的模板绑定到数组的各个项目。例如，

<div *ngFor="#item of what_is_x">{{item}}</div>

由于为数组的每个项创建了绑定，如果我们添加或删除或修改项，更改检测将会注意到（并且我们不需要返回不同的数组）。

对于调试，如果您改为使用{{what_is_x | json}}，那么当阵列发生变化时，您还会看到视图更新。（这是因为JsonPipe是有状态的，这导致角度变化检测在每个变化检测周期中对其进行评估。）

使用数组输入属性时，父级中的Angular2更改未反映在子级中

1 个答案: