Angular2 Значение атрибута привязки

Подобно Angular2 привязке двухсторонних данных, у меня есть родительский и дочерний компоненты. В родительском я изменяю значение, которое передается дочернему компоненту через свойство. Свойство дочернего объекта называется percentage.

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

Я хочу привязать значение свойства к значению атрибута html. Например: < div style = "width: {{percent}}%" > . Я не нашел синтаксиса, который сработал. Таким образом, я закончил использовать прослушиватель изменений, который выполняет некоторое обновление DOM вручную:

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

Есть ли более элегантный способ сделать это?

Ответ 1

Используйте NgStyle, который работает аналогично Angular 1. Поскольку alpha-30, NgStyle доступен в angular2/directives:

import {NgStyle} from 'angular2/directives';

Затем включите NgStyle в список директив, это должно работать (здесь - некоторые примеры):

@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>

Ответ 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;
}