将类和关联样式动态添加到元素答案

【问题标题】：Dynamically add class and associated styles to element将类和关联样式动态添加到元素
【发布时间】：2020-01-12 07:49:57
【问题描述】：

我正在使用可能的多项选择来设计 ng-select 样式，我想动态更改其中一种子元素样式，以便它可以根据父元素的输入计算最大高度。我需要从 ng-select 组件中准确地设置“.ng-value-container”类的样式。

我已经尝试通过 ElementRef、querySelector 执行此操作，并且我正在寻找一种方法来找到它的子项，因此通过 ElementRef 我会更改它的样式

Ng select 看起来像这样，所以我不能只使用 ts 文件中的变量在组件上添加样式。

<ng-select class="multi-select placeholder-select" [class.required-border]="required"
    [searchable]="searchable" [(items)]="items" [searchFn]="searchFn" [closeOnSelect]="closeOnSelect"
    [multiple]="multiple" [clearable]="false" [bindLabel]="bindLabel" (focus)="onFocus()" (focusout)="onFocus()"
    (search)="onSearch($event)" (change)="onChange($event)" [(ngModel)]="chosenOption" [notFoundText]="notFoundText"
    #select>
</ng-select>

我希望这个具有类“.ng-value-container”的内部元素的最大高度例如在输入为 3 时为 150px，当输入为 4 时为 200px，如果有更多选定项，则元素将为可滚动。

【问题讨论】：

标签： angular typescript

【解决方案1】：

我在任何答案之前找到了这个问题的解决方案，所以我会在这里发布，以防有人遇到同样的问题。

首先需要添加对元素（#name）的引用，例如：

<ng-select #name></ng-select>

然后使用 ViewChild 注释在你的逻辑中获取这个元素。

@ViewChild('name', { static: false }) select;

并通过它添加最后的get元素子项，并在ngAfterViewInit方法中指定maxHeight。就我而言，它是这样的：

ngAfterViewInit() {
   (this.select.element.children[0].children[0] as HTMLElement).style.maxHeight = `${50 * this.input}px`;
 }

【讨论】：