Question

我想将属性添加到我在angular 2组件实现中创建的自定义选择器。

@Component({
selector: 'my-node',     // add attributes to this selector 
template: `<div> <ng-content></ng-content> </div>`    
})

这样当我做<my-node>时，dom会生成带有这些额外属性的选择器

<my-node flex="25" layout="row">

我不希望每次<my-node>都对这些属性进行硬编码。我希望这些属性成为选择器构造模板的一部分。

像我这样的东西正在寻找但却没有在api中看到类似的东西

@Component({
selector: 'my-node',     
selectorAttributes: `layout="row"`  // generates <my-node layout="row">
template: `<div> <ng-content></ng-content> </div>`    
})

Answer 1

使用host元数据属性的@Component。

@Component({
   selector: 'my-node',     // add attributes to this selector 
   template: `<div> <ng-content></ng-content> </div>`,
   host: { // this is applied to 'my-node' in this case
      "[class.some-class]": "classProperty", 
      "[attr.some-attr]": "attrProperty", 
   },   
})

以下是plunk示例。见app/app.component.ts

Answer 2

另一种选择是使用HostBinding dectorator

@HostBinding('attr.layout')
layout = 'row';

将属性添加到Angular 2组件选择器

2 个答案: