Data binding Angular2绑定属性值

类似于，我有一个父组件和一个子组件。在父组件中，我更改通过属性传递给子组件的值。子项的属性名为

percentage

我想将属性值绑定到html属性值。比如：。我没有发现任何有效的语法。因此，我最终使用了一个更改侦听器来进行一些手动DOM更新：

this.progressElement = DOM.querySelector(element.nativeElement, '.progress');
DOM.setAttribute(this.progressElement, "style", `width: ${this.percentage}%`);

---

有没有更优雅的方法来实现这一点？

使用与Angular 1类似的

NgStyle

。由于，NgStyle在

angular2/directives

中可用：

import {NgStyle} from 'angular2/directives';

然后将

NgStyle

包括在指令列表中，这应该有效（以下是一些示例）：

---

您可以对CSS属性使用百分比绑定：

[style.width.%]

import {Component, Input} from 'angular2/core';

@Component({
    selector: 'progress-bar',
    template: `
        <div class="progress-bar">
            <div [style.width.%]="value"> {{ value }}% </div>
        </div>
    `,
})
export class ProgressBar {
    @Input() private value: number;
}

从'angular2/core'导入{组件，输入}；
@组成部分({
选择器：“进度条”，
模板：`
{{value}}}%
`,
})
导出类ProgressBar{
@Input（）私有值：number；
}

我们应该使用[style.width.px]或一些单位指示器

<div class="progress" [style.width]="percentage + '%'"></div>

import {Component, Input} from 'angular2/core';

@Component({
    selector: 'progress-bar',
    template: `
        <div class="progress-bar">
            <div [style.width.%]="value"> {{ value }}% </div>
        </div>
    `,
})
export class ProgressBar {
    @Input() private value: number;
}