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

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", 
   },   
})

下面是一个例子普拉克.看到app/app.component.ts

Answer 2

另一种选择是使用HostBinding dectorator

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