Angular2綁定屬性值

Question

與Angular2 two-way data binding類似，我有一個父組件和一個子組件。在父級中，我通過屬性更改傳遞給子組件的值。兒童的財產被命名爲percentage。

https://gist.github.com/ideadapt/59c96d01bacbf3222096

我想要的屬性值和一個HTML屬性值綁定。如：< div style =「width：{{percentage}}％」>。我沒有找到任何有效的語法。所以最後我用一個變化監聽，做一些手工DOM更新：

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

有沒有做到這一點更優雅的方式？

Answer 1

使用NgStyle，其工作原理類似於角1.由於alpha-30，NgStyle可在angular2/directives：

import {NgStyle} from 'angular2/directives'; 

然後包括NgStyle在指令列表中，這應該工作（here是一些例子）：

@View({ 
    directives: [NgStyle] 
    template: ` 
     <div class="all"> 
      <div class="progress" [ng-style]="{'width': percentage + '%'}"></div> 
      <span class="label">{{percentage}}</span> 
     </div> 
    ` 
}) 

或者和不使用NgStyle，這將很好地工作過：

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

Answer 2

您可以使用百分比結合的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; 
}