javascript - 在 Angular 2 中访问 DOM 属性

Question

我已经实现了一个进度条，并通过使用 document.getElementsByClassName 访问进度条的 width 属性来在 html 中显示进度条的百分比。但是我应该用什么来在 Angular 2 中实现这个，它使用 typescript。

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

Angular 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，这样您就可以动态更新进度条百分比并向用户显示。

HTML 代码

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

typescript 代码

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