使用函数调用多次的 Angular @Input 绑定(bind)

Question

我正在使用 Angular 8。

我有一个带有一个 @Input() 属性的子组件。此输入必须在绑定(bind)之前修改，因此使用方法返回绑定(bind)数据

<app-child [info]="getInfo()"></app-child>

在父组件中，getInfo() 返回值如下

getInfo(): any|null {
  console.log('called...');

  if (this.data) {
    return JSON.parse(this.data);
  }

  return null;
}

但是这样一来，每当子组件中发生某些事件时，该方法就会被一次又一次地调用。

Stackblitz 示例:https://stackblitz.com/edit/angular-child-com

生产问题:

表单是从接受来自上述方法的输入的子组件呈现的。

单击任何按钮或输入字段，您可以看到来自每个事件的方法调用的控制台日志打印字符串。

这导致在子组件中多次触发 OnChange 事件。

Answer 1

您应该检索数据并将其存储在父组件的属性中，然后将其传递给与子组件的数据绑定(bind)。 Angular 将负责更改检测

@Component({
  selector: 'app-parent',
  template: '<app-child [info]="info"></app-child>',
})
export class ParentComponent implements OnInit {
  info;

  constructor(private service: SomeDataService) {}

  ngOnInit() {
    this.info = this.service.getData();
  }
}