將屬性添加到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

@Component元數據屬性的使用host沒有看到這樣的事情。

@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';