web-dev-qa-db-fra.com

Valeur d'attribut de liaison angulaire2

Similaire à liaison de données bidirectionnelle Angular2 , j'ai un parent et un composant enfant. Dans le parent, je modifie la valeur transmise au composant enfant via la propriété. La propriété de l'enfant est nommée percentage.

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

Je veux lier la valeur de la propriété à une valeur d'attribut html. Comme: <div style = "width: {{percent}}%">. Je n'ai trouvé aucune syntaxe qui fonctionnait. J'ai donc fini par utiliser un écouteur de changement qui effectue une mise à jour manuelle du DOM:

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

Existe-t-il une manière plus élégante d'accomplir cela?

data-bindingattributesangular
24
bubblez

Utilisez NgStyle, qui fonctionne de manière similaire à Angular 1. Puisque alpha- , NgStyle est disponible dans angular2/directives:

import {NgStyle} from 'angular2/directives';

Incluez ensuite NgStyle dans la liste des directives, cela devrait fonctionner ( ici sont quelques exemples):

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

Alternativement et sans utiliser NgStyle, cela fonctionnerait bien aussi:

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

Vous pouvez utiliser pourcentage de liaison pour les propriétés 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;
}
60
DenisKolodin