使用 css 添加样式到 Angular2 中的 ng2-select2

Question

我在我的 Angular2 项目中使用 ng2-select2，我想添加一些样式，例如宽度、高度、边框半径、字体粗细、字体大小，...但我不能'管不了。

我的 Html 代码如下：

<select2 [data]="exampleData"></select2>

我还尝试将 class 和 id 添加到我的 select2 元素，但它不起作用。你知道我该怎么做吗？

Answer 1

你必须使用 width 属性，就像在回购描述中提到的那样

<select2 [width]="dynamic_width"></select2>

从这里参考

https://github.com/NejcZdovc/ng2-select2#inputs

否则您可以使用 ngStyle 或 ngClass 动态绑定到样式（PS：- 未测试）

Answer 2

您可以尝试自定义组件

    @Component({
            selector: "your-component",
            templateUrl: "your-template.component.html",
            styles: [`
                    :host >>> .select2-container {
                                min-width: 1000px;
                    }
            `]
    })

Answer 3

如果要使用"width"，可以配合Select2Options使用class。

在你的组件中只定义一个 Select2Options 对象：

let options: Select2Options;

设置您想要的属性：

this.optionsSelect = {
  placeholder: "Select option...",
  allowClear: true,
  width: "100%"
}

在您的 html 中，将 [options] 输入您的选项名称：

<select2 [data]="seccion" [cssImport]="true" (valueChanged)="onSeccionChange($event)" [options]="optionsSelect"></select2>

有了这个 class 你可以自定义一些东西，例如：添加一个占位符，或者允许保留 select 而没有 selection。

就我而言，我正在尝试更改背景颜色，但找不到解决方案。

使用 css 添加样式到 Angular2 中的 ng2-select2

Adding style using css to ng2-select2 in Angular2

html

css

select2

angular