如何在Angular选择器中传递变量

Question

我有一个角度charComponent创建饼图，线条和其他图形，我想嵌入我的应用程序的不同位置。

我使用选择器：

<chart></chart>

公开图表。

我想要做的是在代码中嵌入一个变量，这样我就能告诉组件我想要返回的图表。

这样的事情：

<chart variable="pie-chart"></chart>

这样的事情是可能的，还是有更好的方法呢？

Answer 1

它被称为属性绑定，是您应该/将要与Angular一起使用的核心概念之一。

1. 定义变量，该变量将作为

   传递给ChartComponent

   export class ChartComponent {
   
     @Input() public varName: string; // this is typed as string, but you can use any type you want
   
     constructor() {}
   }
   

2. 现在您可以使用

<chart [varName]="varValue"></chart>

OR

<chart varName="varValue"></chart>

将变量值传递给ChartComponent。两个符号之间的区别在于，第一个符号传递varValue，将被评估;而在第二种表示法中，varName值为“varValue＆＃39;。

”

是的，Angular文档有时候非常好。 ：）

Answer 2

我建议您先阅读https://angular.io/guide/component-interaction