如何自定义 ng-select 中的清除按钮？

Question

Ng-select 组件有一个清除按钮。有没有办法使用 SVG 图像而不是默认的 'x' 字符？

截图：

Answer 1

显然这在 ng-select 文档中尚不可用。

但您可以在 ng-select 呈现后使用另一个 icon 强制手动更改它。

Typescript 示例：

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

@Component({
    selector: 'app-example',
    templateUrl: './example.component.html',
    styleUrls: ['./example.component.scss']
})
export class ExampleComponent implements AfterViewInit {
    @ViewChild('ngSelect', { static: false }) public ngSelect: ElementRef;

    constructor() {
    }

    ngAfterViewInit() {
      setTimeout(() => {
        (this.ngSelect as any).element.querySelector('.ng-clear').innerHTML = '<i class="fa fa-code"></i>';
      }, 1);
    }
}

不要忘记将 #ngSelect 添加到 ng-select 元素：

HTML 示例：

<ng-select #ngSelect>
</ng-select>

Answer 2

我找到了另一种方法，但是在 CSS 中。您可以将 class 'custom' 添加到 ng-select 并像这样更改其样式：

<ng-select class="custom"></ng-select>

/* Hide default cross */
.ng-select.custom .ng-clear-wrapper .ng-clear {
  font-size: 0;
}

/* Display our image */
.ng-select.custom .ng-clear-wrapper .ng-clear::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background-image: url('path/to/svg');
}

P.S：如果您使用视图封装，您的样式将不会应用于 ng-select。为避免这种情况，请将 encapsulation: ViewEncapsulation.None 添加到组件元数据中。

如何自定义 ng-select 中的清除按钮？

How to customize clear button in ng-select?

angular-ngselect

angular