如何在角度2中将数据从父构造函数传递到子组件

Posted 2023-02-23

【中文标题】如何在角度2中将数据从父构造函数传递到子组件

【英文标题】：How to pass data from parrent constructor to child component in angular 2

【发布时间】：2017-09-03 09:21:35

【问题描述】：

我有一个 Angular 2 页面，我需要使用来自外部 API 的相同数据数组来显示 2 个不同的组件。父组件是常规组件，子组件在其他几个使用相同功能的组件之间共享。

在父组件类中我声明了输出属性：

public weatherList: WeatherForecast[];
@Output() public weatherListData: any;

在父组件的构造函数中，我使用来自外部 API 的数据填充 weatherListData 属性

    http.get(url)
        .subscribe(result => 
            this.weatherList= result.json() as WeatherForecast[];
            this.weatherListData = this.weatherList;
        );

我在父模板中成功使用它，例如： weatherList.someValue

另外，在父组件模板中，我调用了一个子组件

<daily-temperature-chart [weatherListData]='weatherListData'></daily-temperature-chart>

在子组件类中我声明了属性

@Input() weatherListData: any;

但是，当我尝试访问构造函数中的weatherListData 属性或子组件的初始化时，我得到未定义的结果。

编辑：我玩过 console.log() 并注意到子组件 Constructor 和 OnInit() 方法在 http.get() 从父组件返回之前返回。也许这是个问题，但我还是 Angular 的新手，不知道。

有人能指点我如何解决这个问题吗？

【问题讨论】：

你试过没有@Output装饰器吗？因为，@Output 并不是真正的用途。

是的，但它是一样的。

好的。而且您 100% 确定 http.get 返回的是一个数组，而不是一个对象。我想知道演员阵容是否失败。

我是 http.get() 中的 weatherData 和 weatherListData 的“console.log()”，它们是相同的...

【参考方案1】：

您有一个服务调用，因此您不能使用构造函数或 OnInit，因为对于这种情况，组件初始化不依赖于您的服务调用，每当您的输入值更新时，Angular 都会提供 OnChanges OnChanges 触发。

 ngOnChanges(changes: any)
  console.log(changes);
  console.log(this.weatherListData);
 

OnChanges 还传递了一个参数，该参数通知当前状态和之前的状态，现在您可以使用输入值。如果您的组件基于输入并且输入基于任何其他操作，您可以在此块中处理它。