Question

我试图将值绑定到非原生的元素属性，显然通常的方法不起作用：

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

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

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

    constructor(private el: ElementRef) { }
}

我这样引用这个指令：

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

我希望这是DOM中的最终结果（即后角度渲染）：

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

我已经设法通过简单地使用ngOnInit函数来实现这一点，该函数设置如下属性：

ngOnInit(){
    this._setAttributes();
}

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

但这不是Angular方式，我想知道是什么？

P.S。我认为Angular 2的性能优势在某种程度上与坚持本机DOM有关，但有没有办法覆盖自定义元素/属性？也许这是错的，无论哪种方式，我都很感激你的见解。

Answer 1

如果要将属性添加到DOM使用属性绑定语法而不是属性绑定语法。

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

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

Answer 2

我会使用指令输入的值来使用指令的host块来设置属性：

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

请参阅此plunkr：https://plnkr.co/edit/KYSIzmAqWLrc2n0yR8j5?p=preview

如何绑定Angular 2中的非本机属性？

2 个答案: