Angular - 将插值表达式作为组件参数传递

Question

我正在构建一个充当下拉列表的组件。 由于这是为了普遍使用，我希望任何对象列表都可以与下拉列表一起显示。

<dropdown [options]="list" [itemKey]="'itemkey'" [displayExpression]="Item no {{attr}}" (selectedItem)="getSelectedItem($event)"></dropdown>

我知道我也可以传递模板，但我认为传递要插值的表达式对于开发人员来说会更简单。

1. 如何发送字符串插值？我应该用单引号传递吗？
2. 如何在组件内插入字符串？

Answer 1

传递模板确实是实现您期望的更灵活的方式，但是，如果模板对您来说太重，那么简单的事情就是传递一个标签 getter

// ts
getItemLabel(item) {return `${item.name} is an item`}

// html
<dropdown [labelGetter]="getItemLabel">

// dropdown html
<label>{{labelGetter(item)}}</label>