如何将Angular 5变量绑定到LESS变量？

Question

我在Angular 5 app上使用这个LESS径向条。现在，它位于组件的HTML模板上，“data-progress”的数字被硬编码为75.我可以使用Angular绑定括号将页面上的其他内容绑定到我的TypeScript，因此数据可用。但是如何将Angular数据传递给LESS变量呢？

我考虑过动态生成HTML并通过document.getElementById插入到DIV中，但这只是将原始代码插入页面。我的目标是使用来自这个JS Fiddle的HTML和LESS，但能够通过TypeScript更改75的硬编码值。

http://jsfiddle.net/andydesrosiers/fwaLt99a/

<div class="radial-progress" data-progress="75">

Answer 1

你不会绑定到LESS变量，你只是binding to an HTML element attribute称为data-progress：

<div class="radial-progress" [attr.data-progress]="progress">

在您的Component中，更新名为progress的公共成员变量，您可以将其声明为：

progress: number = 0;

然后你可以基本上逐字地使用你的小提琴代码。

你可能需要