时间戳

首页 > 解决方案 > 如何将带有参数的函数传递给Angular中的内部组件

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

问题描述

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

父.html

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

child.html

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

子组件

getDailyForeCast(symbol){

...}

标签： htmlangulartypescriptcomponents

解决方案

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

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

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

@Input('symbol') symbol;

只需使用{{symbol}}在您的 html 文件中使用此符号

推荐阅读