角度2:父值更改时更新@Input属性

Question

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

Answer 1

如果要从父组件获取更新值，则需要添加changeDetection:changeDetection策略。子组件中的OnPush

注意：OnPush通过比较组件输入的引用来工作

@Component({
  selector: 'abc',
  templateUrl: 'component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class childComponent {
   //below get updated value every time value changes in parent  
   @Input() inputFromParent: string;
}

在父组件中，使用子组件abc

 <abc [inputFromParent]="passdata"></abc>

在父ts中this.inputFromParent = newData//在首次初始化后完成

现在，如果您更改passdata的值，那么它也将更改子组件属性中的值。

Ref:了解Angular中的变化检测策略

Answer 2

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

示例

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

如果您将更新myData.name="Test"，它将不会被触发。您需要做一些事情

this.myData = changedData;

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

Answer 3

在父组件更改时，也在子组件中进行更改

以下是如何使用 OnChanges 接口来检测组件中的更改

在父组件中.html

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

在child.component.ts中

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
  }

}