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

Question

我正在使用 Angular 8.

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

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

并且在父组件中，getInfo() returns 的值类似于

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

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

Answer 2

通过 async pipes 实现无状态。我认为这更接近你想要做的事情。我尽可能使用异步管道，因为它比对所有内容都使用属性更干净——意外后果也更少。

@Component({
  selector: 'app-parent',
  template: '<app-child [info]="info$ | async"></app-child>',
})
export class ParentComponent implements OnInit {
  info$ = this.service.getData().pipe(
    map(data => JSON.parse(data))
  );

  constructor(private service: MyService) { }
}

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

Angular @Input binding using function calling multiple times

angular

angular-changedetection