Question

我想将模糊的类添加到<ng-select>的子元素中，该元素当然不在html中，因为它已编译。

子元素就是这个： .ng-select > .ng-select-container .ng-has-value

我尝试过：

在CSS文件中：

    :host>>>.ng-select .ng-select-container .ng-has-value {
        padding-top: 8px !important;
    }

在Typescript文件中：用ngClass指令添加类无效。

这：但是我无法选择正确的元素（nativeElement未定义）

@ViewChild('select')
select: ElementRef;

let a = this.select.nativeElement.querySelectorAll('ng-select.ng-select-container')[0];
a.nativeElement.classList.add('paddingCenter');

我需要在此div上应用填充顶部（ng-select内的第一个div）：

<ng-select _ngcontent-c4 class="ng-select ... >
    <div class="ng-select-container ng-has-value">
          ...
    </div>
</ng-select>

编辑：我发现了我的错误，现在已解决。只是我的CSS规则不够好：我有

:host>>>.ng-select > ng-select-container .ng-has-value {
}

所引用的

  <element :host>
     <element class="ng-select">
        <element class="ng-select-container">
           …
             <element class="ng-has-value">

所以我将其更改为:host>>>.ng-select > div.ng-select-container.ng-has-value 指的是我想要的：

<element :host>
  <element class="ng-select">
    <div class="ng-select-container ng-has-value">

动态将CSS类添加到viewChild元素

0 个答案: