如何将带参数的函数传递给Angular中的内部组件

Posted 2023-02-23

【中文标题】如何将带参数的函数传递给Angular中的内部组件

【英文标题】：How to pass a function with a parameter to an inner component in Angular

【发布时间】：2020-10-17 22:38:26

【问题描述】：

我有一个子组件，它需要来自父组件的数据才能调用其函数。如何将其放入代码中？

parent.html

<child-component>getDailyForeCast(element.symbol)</child-component>

child.html

<canvas id="canvas">  getDailyForeCast(symbol) </canvas>

子组件

getDailyForeCast(symbol)

...

【问题讨论】：

你的函数是在你的父组件中定义的吗？

定义在子组件中，见代码sn-p

你的问题对我来说没有意义。您想将符号从父母传递给孩子吗？

是的，就是这样

我已经回答了解决方案。您的问题是否使用以下解决方案解决了？

【参考方案1】：

我认为您不需要将函数传递给子组件。 您只想将 element.symbol 传递给子组件，您可以在您的子组件中使用 @Input。

<child-component [symbol]="element.symbol"> </child-component>

在您的子组件中，您可以在 .ts 文件中定义变量：

@Input('symbol') symbol;

并且只需使用 symbol

在您的 html 文件中使用此符号

【参考方案2】：

您可以使用Input 装饰器绑定来自另一个组件的属性。文档：https://angular.io/api/core/Input

现在您可以在子组件中使用该符号并对其进行任何操作。

parent.component.html

<child-component [symbol]='element.symbol'></child-component>

child.component.ts

@Input() symbol;

getDailyForeCast()
  // use this.symbol and return some output    
...

child.component.html

<canvas id="canvas">  getDailyForeCast() </canvas>

PS：如果涉及多个组件，你可以考虑使用一个服务。

【讨论】：

与我上面的答案相比，您在答案中写的任何内容都传达了相同的解决方案。所以我认为这个答案并没有做出更多贡献。

@Minal Shah 我记得它们大约是在同一时间写的。然而，这里有一些额外的细节，输入文档参考、如何访问输入、子模板的示例以及使用服务的建议。