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

这是一个示例 plunk 。见app/app.component.ts

Answer 2

另一种选择是使用 HostBinding 析取器

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