訪問Angular 2中的DOM屬性

Question

我已經實現了一個進度條，並通過使用document.getElementsByClassName訪問進度條的width屬性來顯示html中進度條的百分比。但是，我應該如何在Angular 2中使用打字稿來實現這一點。

工作HTML和JS代碼：https://jsfiddle.net/nvarun123/2cy2kg7y/1/

角2代碼（應該是固定的）：https://plnkr.co/edit/nlRa0aaQv7GntxxBy8AC?p=preview

HTML代碼：

<div class="container"> 
    <div class="bar"> 
    <span class="bar-fill"></span> 
    </div> 
</div> 
<div id="progress"></div> 

JS代碼：

var 
    bar = document.getElementsByClassName("bar")[0], 
    barFill = document.getElementsByClassName("bar-fill")[0], 
    progress = document.getElementById("progress"), 
    barWidth = window.getComputedStyle(bar, null).getPropertyValue("width"), 
    barFillWidth = window.getComputedStyle(barFill, null).getPropertyValue("width"), 
    pct = 100 * (parseFloat(barFillWidth)/parseFloat(barWidth)) + "%"; 

progress.innerHTML = pct; 

Answer 1

我將使用ngStyle，以便您可以動態更新進度條perc吸引並展示給用戶。

HTML代碼

<div class="container"> 
    <div class="bar"> 
    <span class="bar-fill" [ngStyle]="{'width': progressPercentage + '%'}"> 
    </span> 
    </div> 
</div> 
<div id="progress">{{progressPercentage}}%</div> 

打字稿代碼

import {Component} from '@angular/core'; 
@Component({ 
    selector:'progressbar', 
    styleUrls: ['./progressbar.component.css'], 
    templateUrl: './progressbar.component.html' 

}) 
export class ProgressBar{ 
    progressPercentage: number; 

    constructor() { 
     this.progressPercentage = 50; 
    } 
} 

plunkr https://plnkr.co/edit/LytbNF5HdDYUAxBUYenf?p=preview