Angular 2+：当父值更改时更新 @Input 属性

Question

我有一个父组件和子组件，其中父组件通过 @Input 装饰器将对象传递给子组件。问题是孩子只获取一次父数据，然后在将来更改传递给孩子的父属性后，该值不会被更新。

Answer 1

在父组件更改时，也要更改子组件

以下是如何使用OnChanges检测组件更改的界面

在 parent.component.html

<app-child [child_name]="name"></app-child>

在 child.component

export class ChildComponent implements OnChanges {

  @Input('child_name') name: string
  text: string
  constructor() { }

  // on every change of @input 'name', this method will be triggered
  ngOnChanges() {
    this.text = 'Hi ' + this.name
  }

}

演示

Answer 2

当整个参考将被更新时，数据将被更新。如果您只是更新该对象内的某些属性，则不会触发它。您需要更改传递对象的引用。

例子

<child [data]="myData"></child>

如果您将更新myData.name = "Test"，则不会触发。你需要做点什么

this.myData = changedData;

一种解决方法是使用DoCheck生命周期挂钩并尝试手动检查属性更改。但通常更改引用更方便。