कोणीय 2 बाइंड विशेषता मान

Question

Angular2 two-way data binding के समान, मेरे पास एक अभिभावक और एक बच्चा घटक है। अभिभावक में मैं संपत्ति के माध्यम से बच्चे घटक को पास किया गया मान बदलता हूं। बच्चे की संपत्ति का नाम percentage रखा गया है।

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

मैं एक एचटीएमएल विशेषता मान को संपत्ति के मूल्य के लिए बाध्य करना चाहते हैं। पसंद: < div शैली = "चौड़ाई: {{प्रतिशत}}%" >। मुझे कोई वाक्यविन्यास नहीं मिला जो काम करता था। वहाँ एक और अधिक सुरुचिपूर्ण तरीका यह है, है

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

: तो मैं एक परिवर्तन श्रोता कि कुछ मैनुअल डोम अद्यतन करता है का उपयोग कर समाप्त हो गया?

Answer 1

उपयोग NgStyle, जो कोणीय 1. alpha-30 के बाद के लिए इसी तरह काम करता है, NgStyle angular2/directives में उपलब्ध है:

import {NgStyle} from 'angular2/directives'; 

फिर NgStyle निर्देशों सूची में, इस काम करना चाहिए शामिल हैं (here कुछ उदाहरण हैं):

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

Answer 2

आप सीएसएस संपत्तियों के लिए प्रतिशत बाध्यकारी उपयोग कर सकते हैं: [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; 
}