如何在 Angular 2 中调用其构造函数之前将数据发送或绑定到子组件？

Posted 2023-03-13

【中文标题】如何在 Angular 2 中调用其构造函数之前将数据发送或绑定到子组件？

【英文标题】：How to send or bind data to child component before it's constructor is called in angular 2?

【发布时间】：2017-01-16 08:37:31

【问题描述】：

我在 Angular 2 中有父子组件，我想将数据绑定到子指令并在构造函数中获取数据并将该数据传递给服务调用。

父模板 -

<child-comp [id]="id"></child-comp>

子构造函数 -

@Input() id : number;
constructor(service : Service)
      this.service.getData(this.id).subscribe((model: Model) => 
                // logic ...
  );

我无法在子构造函数中获取绑定数据 (id)。但是，我能够在 ngOnChanges() 生命周期挂钩中获取数据。请告诉我如何解决这个问题？

注意 - 当组件加载时，我最初无法获取数据，无论是在 ngOnInit 还是构造函数中。一旦组件在 ngOnChanges 中初始化，我就能得到它。

【参考方案1】：

您必须在 Child 构造函数的 ngOnInit 中获取绑定数据：

ngOnInit()
  this.service.getData(this.id).subscribe((model: Model) => 
                // logic ...
  );

【讨论】：

我无法在组件加载时获取数据，无论是在 ngOnInit 还是构造函数中。一旦组件在 ngOnChanges 中初始化，我就可以得到它。

设置id 中的值时来自父级？在此处发布与它相关的父代码。