Javascript 在Angular 2中访问DOM属性

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

工作HTML和JS代码：

角度2代码（应固定）：

html代码：

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

---

我会使用ngStyle，这样您就可以动态更新进度条百分比并向用户显示

HTML代码

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

---

plunkr

我会使用ngStyle，这样您就可以动态更新进度条百分比并显示给用户

HTML代码

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

---

砰的一声

哇，这是最简单的答案，我从来没有这样想过。感谢asnwerI考虑将ElementRef与querySelector一起使用。你知道其他的方法吗？哇，这是最简单的答案，我还没想过。感谢asnwerI考虑将ElementRef与querySelector一起使用。你知道其他的方法吗？

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;
    }
}