您可以调整Angular组件以在每次使用时使用不同的值吗？

Question

我有一个像这样的组件：

<ice-cream-cone></ice-cream-cone>
<ice-cream-cone></ice-cream-cone>
<ice-cream-cone></ice-cream-cone>

问题是上述组件调用将导致它们看上去完全相同。您可以调整指令以触发组件中特定值的加载吗？我希望与此类似：

<ice-cream-cone flavor="vanilla"></ice-cream-cone>
<ice-cream-cone flavor="chocolate"></ice-cream-cone>
<ice-cream-cone flavor="rocky_road"></ice-cream-cone>

Answer 1

当然可以，这可以使用Input绑定属性来完成 像这样：

@Component({
  selector: 'ice-cream-cone',
  template: `
    {{flavor}}
  `
})
class IceCreamComponent {
  @Input('flavor') flavor: string;
} 

然后在调用组件时，将执行以下操作：

<ice-cream-cone flavor="vanilla"></ice-cream-cone>

在此处查看：Docs