Angular 有条件地将 CSS 应用于 ::ng-deep 元素

Question

我有一个带有模板的组件

HTML

<mt-select type="multi" hideSelected="true" [ngClass]="test ? 'bgblue' : 'bgGreen'"  [readonly]="!isProdUser" appendTo="body" [options]="searchResponse" openTagsOnHover [(ngModel)]="userSelection"   minLength="2" [viewFields]="['label']" uid="label" (search)="onUserSearch($event)">
</mt-select>

在此输入图片描述

现在 TS 文件中有一个变量测试，我们可以得到

true

或

false

。因此，根据这个变量值，我需要应用一些背景颜色。顺便说一句，我正在使用 SCSS css 预处理器。

但是我需要将 css 应用到图像中提到的类，该类是隐藏的，只能使用

::ng-deep

访问。

我不确定如何根据变量值

lmn-select-input

将样式应用于具有类

test

的隐藏元素。

Answer 1

大多数情况下，您有一种方法可以做到这一点：

1. 创建 2 个具有所需背景颜色的 CSS 类，不要忘记将它们包装到

   :host

   选择器中，因为 ng-deep 样式是全局设置的，会影响 HTML 中的其他组件和元素。

所以，你会得到：

:host::ng-deep {
  .primary-background {
    .some-deep-element-class-to-rewrite {
      background-color: blue;
    }
  }

  .secondary-background {
    .some-deep-element-class-to-rewrite {
      background-color: green;
    }
  }
}

2. 然后您可以根据需要的情况设置这2个包装类（使用

   [ngClass]

   或

   [class]

   ）：

<mt-select [class]="test ? 'primary-background' : 'secondary-background'"></mt-select>