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

Question

我有一个可创建饼图，折线图和其他图形的有角charComponent，我想将它们嵌入到应用程序的各个位置。

我使用选择器：

<chart></chart>

公开图表。

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

所以像这样：

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

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

Answer 1

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

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

   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>

要么

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

将变量值传递给ChartComponent。两种表示法的区别在于，第一种表示法传递的是varValue，它将被求值；而在第二种表示法中，varName值为IS'varValue'。

是的，Angular文档有时还不错。:)