AngularJS2 中的自定义子组件

Question

我目前正在开发 angular2 应用程序。我想知道如何将 html 属性添加到自定义组件。

例如，假设我有自定义的下拉组件，并且在许多地方的同一页面中重复使用。如果我想开发一些下拉列表作为多选，其中一些是单选，你能告诉我怎么做吗？如果我在组件模板上添加多个，它会为所有下拉列表显示多选。如果我在使用的地方单独添加到每个组件，则无法理解"多个"属性。

Answer 1

如果我想开发一些下拉列表作为多选和一些 他们单选，你能告诉我怎么做吗？

您应该使用自定义组件中定义的布尔@Input装饰器(问题似乎不清楚，我假设您没有要求多选和单选的实现逻辑)。下面给出了为自定义组件添加multiselect检查的示例，以及在呈现自定义组件时父级应如何将值绑定到该属性

在自定义组件 .ts 类中

@Input() multiple: boolean = false;

在自定义 html 类中

<div *ngIf="!multiple"> 
// render your single select html
</div>
<div *ngIf="multiple"> 
//render your multiple select html
</div>

在呈现自定义组件时在父 html 中(假设选择器作为组件的名称)

// for multi select
<selector [multiple]=true> </select>
// for single select
<selector [multipl]=false> </select>

如果您正在努力制作支持单选和多选的通用组件，请检查此开源组件 ng-select

如果您对 angular2 中的@Input和@Output装饰器一无所知，请查看这篇文章