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

我在用着角8.

我有一个子组件@Input()财产。必须在绑定之前修改此输入，因此使用方法返回用于绑定的数据，例如

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

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

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

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

  return null;
}

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

堆栈闪电战示例：https://stackblitz.com/edit/angular-child-com https://stackblitz.com/edit/angular-child-com

生产问题：

该表单由子组件呈现，该子组件接受来自上述方法的输入。

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

这会导致多次OnChange子组件中的事件触发器。

您应该检索数据并将其存储在父组件的属性中，然后将其传递给与子组件的数据绑定。 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();
  }
}