Hinzufügen von Attributen zu Angular 2 Component Selector

Question

Ich möchte dem benutzerdefinierten Selektor, den ich in der eckigen 2-Komponenten-Implementierung erstellt habe, Attribute hinzufügen.

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

So dass, wenn ich <my-node> tue Der dom die Wähler mit diesen zusätzlichen Attributen erzeugt

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

Ich will nicht zu hart Code dieser Attributen jedes Mal, wenn ich <my-node> tun. Ich möchte, dass diese Attribute Teil der Selectors-konstruierten Vorlage sind.

So etwas ist, was für Ich suche aber nicht alles wie es in der api

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

Answer 1

Verwenden host von @Component Metadateneigenschaft zu sehen.

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

Hier ist ein Beispiel plunk. Siehe app/app.component.ts

Answer 2

Eine weitere Option ist die HostBinding dectorator

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