angularjs2中的自定义子组件

Question

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

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

Answer 1

If i would like to develop some dropdowns as multiselect and some of them single select, Could you please tell me how to that.

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

在你的习惯里[=34=]class

 @Input() multiple: boolean = false;

在你的习惯中htmlclass

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

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

在父级 html 中呈现自定义组件（假设 select 或 作为组件的名称）

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

如果您正在努力制作一个支持单个和多个的通用组件 select 检查这个开源组件 ng-select

如果您对 angular2 中的 @Input 和 @Output 装饰器一无所知，请查看此 article

angularjs2中的自定义子组件

custom child components in angularjs2

angular2-forms

angular2-template

angular2-components