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

Question

我在 Angular 5 应用程序上使用这个 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 的 public 成员变量，您可以像这样声明它：

progress: number = 0;

然后你就可以基本上逐字使用你的fiddle代码了。

您可能需要

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

How To Bind Angular 5 variables to LESS variable?

less

typescript

angular-template

angular