Angular2 Giá trị thuộc tính ràng buộc

Question

Tương tự như Angular2 two-way data binding, tôi có một phụ huynh và một thành phần con. Trong phụ huynh, tôi thay đổi giá trị được chuyển đến thành phần con thông qua thuộc tính. Tài sản của đứa trẻ được đặt tên là percentage.

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

Tôi muốn liên kết giá trị thuộc tính với giá trị thuộc tính html. Giống như: < div style = "width: {{percentage}}%" >. Tôi không tìm thấy bất kỳ cú pháp nào hoạt động. Vì vậy, tôi đã kết thúc bằng cách sử dụng một người nghe thay đổi thực hiện cập nhật DOM thủ công:

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

Có cách nào thanh lịch hơn để thực hiện việc này không?

Answer 1

Sử dụng NgStyle, hoạt động tương tự như góc 1. Kể từ alpha-30, NgStyle có sẵn trong angular2/directives:

import {NgStyle} from 'angular2/directives'; 

Sau đó, bao gồm NgStyle trong danh sách, chỉ thị, điều này sẽ làm việc (here là một số ví dụ):

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

Hoặc và không sử dụng NgStyle, điều này cũng sẽ hoạt động tốt:

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

Answer 2

Bạn có thể sử dụng tỷ lệ ràng buộc cho thuộc tính 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; 
}