data binding - Angular2 ربط قيمة السمة




data-binding attributes (2)

استخدم 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>

على غرار ربط البيانات ثنائي الاتجاه في 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}%`);

هل هناك طريقة أكثر أناقة لتحقيق ذلك؟


يمكنك استخدام ربط النسبة المئوية لخصائص 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;
}






angular