angularjs2 中的自定义子组件

约翰逊

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

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

克山纳格斯瓦兰

如果我想开发一些下拉菜单作为多选,其中一些是单选,请告诉我如何做。

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

在您的自定义 component.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

如果你不知道的@Input@Output在angular2装饰检查此文章

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

注入组件Angularjs2

在angular 2自定义子组件中动态添加和删除formGroup

在Eclipse中添加AngularJS2插件

AngularJs2在元素的组件中获取find()方法

如何使用angularJS2中的ReactiveFormsModule验证单选按钮?

如何在angularJS2中进行级联?

为什么ngIf无法在angularjs2中工作

@Component 中的 Angularjs2 'templateUrl' - 如何显示剃刀视图

AngularJS2如何使用TypeScript将依赖项注入到我的组件中

如何在自定义组件上定义方法?在AngularJS 2中

在ionic 2中缓存自定义组件的内容

angularjs2 cli,构建chrome扩展程序,定义内容和背景片段的麻烦

如何在Angularjs2(2.0.1)中更快地加载Observable rxjs / Rx lib

如何使用subplot2grid自定义子图中的每个轴?

在 matplotlib 中自定义子图

如何使用FormBuilder(和ionic v2框架)在angularjs2中创建演化形式

AngularJS Material:自定义组件中没有滚动条

离子2:从导航栏中的自定义组件按钮中删除背景

在Angle 2自定义组件中调用一次ControlValueAccessor类中的writeValue函数

Material-UI Select 组件与自定义子项

NPM注册表中未遵循angularjs2快速入门指南错误404错误``angular''

Angular 2:无法通过两种方式绑定在自定义组件中工作

Angular:子组件中自定义输入的2种方式的数据绑定

在Ionic 2中,如何创建使用Ionic组件的自定义指令?

在jar中找不到带注释的自定义JSF2组件

自定义指令与Angular2中的组件之间的通信

Angular2中列表组件的自定义模板(不包含ng-content的包含)

在Ionic 2中将自定义组件用于数据

JSF 2-ui:repeat中的自定义输入文本组件出现问题