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;