angular - Angular 组件模板全局动态字体

Question

我试图允许用户更改字体，这应该动态更新组件。

由于该组件渲染了相当多的材质组件，因此有许多“Roboto”样式。

如果我将它添加到全局 styles.css

* {
    font-family: Lato !important;
  }

它确实成功地覆盖了所有其他字体样式。

但是如何使这种动态呢？我在模板中尝试了一个内联脚本标签，但这会被角度剥离（有意义，除了这个例子）。

我将尝试一个动态样式表link标签，但这意味着为每种字体创建一个样式表，一个正确的 pita。（我们有 14 种字体）。

标签： angularangular-components

Answer 1

您可以为每种字体创建一个类，并使用[ngClass]

例如，创建一个serif类，如下所示：

.serif * {
    font-family: serif !important;
}

然后将其应用于您的AppComponentwith ngClass：

<div [ngClass]="fontClass">

其中fontClass是 ts 文件中设置的变量。