Wie binde ich in Angular 2 an eine nicht-native Eigenschaft?

Question

Ich versuche Werte auf ein Element Attribut zu binden, die nicht-nativ ist und natürlich die übliche Vorgehensweise funktioniert nicht:

import {Directive, ElementRef, Input, OnInit, HostBinding} from 'angular2/core'; 

@Directive({ 
    selector: '[myFeet]' 
}) 
export class MyFeetDirective { 

    @HostBinding('feet') 
    @Input() feetProps:string 

    constructor(private el: ElementRef) { } 
} 

Ich Referenzierung diese Anweisung wie folgt aus:

<div [myFeet]="body.footCount"></div> 

Und ich möchte dies das Endergebnis in dem DOM (dh post-Angular-Rendering) sein:

<div feet="2"></div> 

ich dies eine ngOnInit f, indem einfach zu erreichen ist es gelungen, die

ngOnInit(){ 
    this._setAttributes(); 
} 

private _setAttributes(){ 
    if (this._feetProps != null) { 
     this._el.nativeElement.setAttribute("feet", this._feetProps); 
    } 
} 

Aber das ist nicht der Winkel Weg und ich fragte mich, was ist?

p.s. Ich denke, dass die Leistungsvorteile von Angular 2 in gewisser Weise mit der Einhaltung des nativen DOM zusammenhängen, aber gibt es eine Möglichkeit, dies für benutzerdefinierte Elemente/Attribute zu überschreiben? Vielleicht ist das falsch, so oder so, ich würde Ihre Einsicht schätzen.

Answer 1

Wenn das Attribut der DOM-Bindungsattribut-Bindungssyntax anstelle der Eigenschaftsbindungssyntax hinzugefügt werden soll.

@Directive({ 
    selector: '[myFeet]' 
}) 
export class MyFeetDirective { 

    @HostBinding('attr.feet') 
    @Input() feetProps:string 
} 

Answer 2

Ich würde den Wert der Direktive Eingabe verwenden Sie das Attribut mit dem host Block der Richtlinie festgelegt:

@Directive({ 
    selector: '[myFeet]', 
    host: { 
    '[attr.feet]': 'myFeetValue' 
    } 
}) 
export class MyFeetDirective { 
    @Input('myFeet') 
    myFeetValue:string 
} 

dieses plunkr Siehe: https://plnkr.co/edit/KYSIzmAqWLrc2n0yR8j5?p=preview