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

提问者：小点点

我有一个子组件，它需要父组件的数据才能调用它的函数。我该怎么把这个写进代码里呢？

parent.html

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

child.html

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

ChildComponent

getDailyForeCast(symbol){

...}

共2个答案

匿名用户

我认为您不需要将函数传递给子组件。您只想将Element.Symbol传递给子组件，您可以在子组件中使用@Input来完成此操作。

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

在子组件中，可以在。ts文件中定义变量:

@Input('symbol') symbol;

并且只需使用{{symbol}}在html文件中使用此符号即可

匿名用户

您可以使用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:如果涉及到多个组件，可以考虑使用一个服务。