Angular 2 通过 css 选择器和 html 属性添加值

Question

我想将以下进度条添加到我的 angular 2 项目中，但我想使用嵌入，以便我可以将使用它的组件中的数据传递到值字段中。这是我要使用的进度条：

https://codepen.io/JMChristensen/pen/Ablch

我遇到的问题是对 css 和 html 选择器的引用。比如进度条使用：

var $circle = $('#svg #bar');
var r = $circle.attr('r');
var c = Math.PI*(r*2);
$circle.css({ strokeDashoffset: pct});        
$('#cont').attr('data-pct',val);

如何在不使用 JQUERY 的情况下在 angular 2 中执行此类行为？

Answer 1

1. 获取circle:

   var circle = document.getElementById("bar");

2. 获取r:

   var r = circle.r; var c = Math.PI*(r*2);

3. 设置strokeDashoffset:

   circle.style.strokeDashoffset = pct;

4. 设置data-pct:

   document.getElementById("cont")["data-pct"] = val;