Question

我在Angular2项目中使用ng2-select2，我想添加一些样式，如宽度，高度，边框半径，字体粗细，字体大小......但我无法＆＃ 39;管理它。

我的Html代码如下：

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

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

Answer 1

如果您想使用“width”，可以将它与Select2Options类一起使用。

在您的组件中，只需定义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>

使用此类，您可以自定义一些内容，例如：添加占位符，或允许保留选择而不进行选择。

在我的情况下，我正在尝试更改背景颜色，但我找不到解决方案。

Answer 2

您可以尝试自定义组件

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

Answer 3

您必须使用回购说明中提到的width属性，如此

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

从这里参考

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

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

在Angular2中使用css向ng2-select2添加样式

3 个答案: