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

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

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>

但这不是棱角分明的方式，我想知道是什么

---

p、 我认为Angular 2的性能优势在某种程度上与遵循本机DOM有关，但是有没有一种方法可以覆盖自定义元素/属性？也许这是错误的，不管怎样，我都很感激您的见解。

如果您希望将属性添加到DOM中，请使用属性绑定语法而不是属性绑定语法

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

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

---

我将使用指令输入的值，使用指令的

host

块设置属性：

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

---

请看这篇文章：

事实上，我不确定我的答案是否就是你想要的。我很难从你的问题中找出你的问题是什么，以及解决方案的结果应该是什么样子。你所说的“显然通常的方法不起作用”是什么意思？如果您想在DOM中使用

，那么只需编写

谢谢，冈特，这似乎是一个正确的想法，但我仍在努力让它正常工作。如果添加“attr.”前缀，则不会显示输出。我仍然在摆弄它，但NG2对我来说是非常新的。我会用我找到的任何东西更新这个。是的！谢谢你！我在一些示例中看到过这种语法，但它们似乎是“旧”的方式，而不是在angular文档中看到的方式。你能给我指一下这个信息的参考资料吗？我想使用最新的（了解它是WIP）。再次感谢，非常感谢：）我觉得如果NG2用方括号支持这种语法（例如@HostBinding（“[attr.feet]”），你的答案会是一个非常清晰的解决方案。不过，它会抛出一个无效字符错误。无论如何，干杯！

[]

在

@HostBinding

中是隐式的。只需使用

@HostBinding（'attr.feet'）

这是我尝试的第一件事，但没有得到任何输出……您让我再次检查，因为我已经清除了我的指令（使用上面的简单示例重建）它起作用了。我一定是有什么东西在里面有冲突。该死！对不起，这个答案是正确的：）

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

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

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