在角度 10 中添加类以及角度 ts 文件中的样式属性答案

【问题标题】：Add class along with style properties from angular ts file in angular10在角度 10 中添加类以及角度 ts 文件中的样式属性
【发布时间】：2022-02-03 23:09:48
【问题描述】：

我必须在单击按钮时向 div 添加一个类以及该类中的高度属性。该类将具有一个属性 height ，该属性每次根据 div 的高度动态计算。我不想将样式属性添加到我的 div 元素。我想添加一个具有高度属性的类。

【问题讨论】：

看看这个angular.io/api/common/NgClass
@Raffael No ngClass 不适用于我的情况。 ngClass 将添加一个存在于我的 scss 文件中的类。我实际上想从我的 angular componet.ts 文件中添加一个类及其属性。
您只能从 TS 中添加动态样式。我们不能动态更新 CSS 文件类中的样式。如果你想在 CSS 中进行计算，请参考 w3schools.com/cssref/func_calc.asp。

标签： javascript html css angular angular10

【解决方案1】：

如果 NgClass 不是一个选项，因为您希望类是动态的，您可以在组件 ts 文件中编写一个函数，如下所示：

getStyles() {
  let calcHeight = .... // do the calcutions
  return {'height': calcHeight + 'px'};
}

然后在html文件中

<div [ngStyle]="getStyles()"></div>

【讨论】：

我也试过这个。它在我的 div 中添加了一个样式属性。比如
。相反，我想在我的 div 中添加一个类，例如
并且我只想从 ts 文件中设置 myClass 中的属性高度，以便根据一些计算我可以修改高度价值。

【解决方案2】：

您可以使用自定义属性指令：https://angular.io/guide/attribute-directives

【讨论】：