Angular：使用 css 变量更改字体大小正在应用但未反映在浏览器中的某些字段

Question

我将 CSS 变量用于用户可以选择将字体大小更改为小、中或大的功能。所以对于大多数领域，它都按预期工作。但对于某些字段，该值已应用但未反映

:host-context(.mediumFont) {
    --fontSize: 11px;
}
:host-context(.largeFont) {
    --fontSize: 12px;
}
:host-context(.smallFont) {
    --fontSize: 10px;
}

refClassArray: RefClassInterface[] = [
        { class: 'font-small', refClass: 'smallFont' },
        { class: 'font-medium', refClass: 'mediumFont' },
        { class: 'font-large', refClass: 'largeFont' },
    ];
defaultFontSize = 'mediumFont';

changeFontSize(selector: string) {
        this.defaultFontSize = selector;
        let docBody = document.body;
        console.log(document.getElementById(selector));
        docBody.classList.add(selector);
        this.refClassArray.forEach((refClass: RefClassInterface) => {
            if (selector !== refClass.refClass) {
                docBody.classList.remove(refClass.refClass);
                document.querySelector('#' + refClass.refClass).setAttribute('style', 'font-weight: normal;' + 'pointer-events: auto;');
            } else {
                document.querySelector('#' + refClass.refClass).setAttribute('style', 'font-weight:' + 'bold;' + 'pointer-events: none;');
            }
        });
        this.ieStyles.iEfont(selector);
    }

以上是我使用的逻辑。

第一张图片来自运行良好的元素。当我将鼠标悬停在 --font-size 上时，会反映出 11px。第二个是它没有按预期工作的那个，当我将鼠标悬停在 --font-size 上时，什么也没有出现。这两个元素都在 <body>

内

Answer 1

您不应通过直接访问修改您的 html 代码。例如，这可能会使您的应用程序容易受到 XSS 攻击。

相反，Angular 团队建议使用 Renderer2。

获取您的代码并对其进行修改以使用它，将导致以下结果：

refClassArray: RefClassInterface[] = [
        { class: 'font-small', refClass: 'smallFont' },
        { class: 'font-medium', refClass: 'mediumFont' },
        { class: 'font-large', refClass: 'largeFont' },
    ];
defaultFontSize = 'mediumFont';

changeFontSize(selector: string, indexOfClassToAdd: number) {
  this.defaultFontSize = selector;
  const el: Element = document.getElementById(selector));
  // Iterate each class in the list to remove it.
  this.refClassArray.forEach((refClass: RefClassInterface) => {
    // Remove the class from the specific element only if its present.            
    if (el.classList.contains(refClass.refClass) {
      this.renderer2.removeClass(el, refClass.refClass);
    };
  });
  this.renderer2.addClass(el, refClassArray[indexOfClassToAdd].refClass);
};

这意味着您知道要应用的 class 是什么（它存在于 style.scss 或适当的 scss 文件中）。

亲切的问候。

Answer 2

出于好奇，你为什么要这样做而不是简单地使用具有所需文本大小的 class？

无论哪种方式，您的值似乎都没有被应用，因为您的选择器不够具体。

要更正此问题，您可以使用类似以下内容的人工特定选择器：

html > body * { // rules }

Answer 3

为什么不用ngClass？定义三个类

.font-small{
    fontSize: 10px
}
.font-medium{
    fontSize: 11px
}
.font-large{
    fontSize: 12px
}

为用户 select 绑定一些东西，比如 userChoice: SizeEnum 或其他东西

然后，在您的数据元素上，使用 ngClass 进行绑定

ngClass = "{
 'font-small': userChoice === sizeEnum.small,
 'font-medium': userChoice === sizeEnum.medium,
 'font-large': userChoice === sizeEnum.large
}"

Answer 4

问题已通过移动解决

:host-context(.mediumFont) {
    --fontSize: 11px;
}
:host-context(.largeFont) {
    --fontSize: 12px;
}
:host-context(.smallFont) {
    --fontSize: 10px;
}

从 app.component.scss 到 styles.scss。因为弹出窗口不是 app.compontnet.html 的一部分，所以它们呈现在它外面。

Angular：使用 css 变量更改字体大小正在应用但未反映在浏览器中的某些字段

Angular: Changing font-size using css variables is applying but not reflecting in browser for certain fields

html

css

typescript

css-variables

angular