data-binding - reactivos - pasar parametros entre componentes angular 4

Angular2 Enlace Valor de atributo

Question

Al igual que con el enlace de datos bidireccional Angular2 , tengo un componente primario y uno secundario. En el padre, cambio el valor que se pasa al componente secundario a través de la propiedad. La propiedad del niño se llama percentage .

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

Quiero vincular el valor de la propiedad a un valor de atributo html. Me gusta: <div style = "width: {{percentage}}%">. No encontré ninguna sintaxis que funcionó. Así que terminé usando un detector de cambios que hace algunas actualizaciones DOM manuales:

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

¿Hay una forma más elegante de lograr esto?

Answer 1

Puede usar el enlace porcentual para las propiedades 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;
}

Answer 2

Use NgStyle , que funciona de manera similar a Angular 1. Desde alpha-30 , NgStyle está disponible en angular2/directives :

import {NgStyle} from ''angular2/directives'';

Luego incluya NgStyle en la lista de directivas, esto debería funcionar ( here hay algunos ejemplos):

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

Alternativamente y sin usar NgStyle , esto también funcionaría bien:

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