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

Question

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

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的情况下在角度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;