Thêm thuộc tính vào Bộ chọn thành phần góc 2

Question

Tôi muốn thêm thuộc tính vào bộ chọn tùy chỉnh mà tôi tạo trong triển khai thành phần góc 2.

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

Vì vậy mà khi tôi làm <my-node> Các dom tạo bộ chọn với những thuộc tính thêm

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

Tôi không muốn cứng mã những thuộc tính này mỗi khi tôi làm <my-node>. Tôi muốn các thuộc tính đó là một phần của các bộ chọn được xây dựng mẫu.

Something như thế này là những gì Im tìm kiếm nhưng không thấy bất cứ điều gì giống như nó trong api

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

Answer 1

Sử dụng host của @Component sở hữu siêu dữ liệu.

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

Dưới đây là ví dụ plunk. Xem app/app.component.ts

Answer 2

Một lựa chọn khác là sử dụng HostBinding dectorator

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