如何在Angular 6中为不同的ng select使用默认主题和材质主题

我需要将

ng select

与我的页面上的材质主题一起使用，将

ng select

与另一页面上的默认主题一起使用

我在第一页上试过：

<ng-select
  class="material"
  [items]="choices"
  [(ngModel)]="model"
  name="{{name}}"
  bindLabel="value">
</ng-select>

但最终的样式看起来像是材质主题和默认主题的组合

---

有没有办法通过使用上述类来同时使用这两个主题？：）

如果您的

style.scss

具有以下代码，则您的

~@ng-select/ng-select/themes/default.theme

将加载到

中。default

和

~@ng-select/ng-select/themes/material.theme

将加载到

中。material

.material {
   @import "~@ng-select/ng-select/themes/material.theme";
}

.default {
   @import "~@ng-select/ng-select/themes/default.theme";
}

所以像这样更改HTML代码。希望它能起作用

• 第一页

• 第二页

.material {
   @import "~@ng-select/ng-select/themes/material.theme";
}
.default {
   @import "~@ng-select/ng-select/themes/default.theme";
}

.material {
   @import "~@ng-select/ng-select/themes/material.theme";
}

.default {
   @import "~@ng-select/ng-select/themes/default.theme";
}

<div class="default">
  <ng-select
    [items]="choices"
    [(ngModel)]="model"
    name="{{name}}"
    bindLabel="value">
  </ng-select>
</div>

<div class='material'>
  <ng-select
    [items]="choices"
    [(ngModel)]="model"
    name="{{name}}"
    bindLabel="value">
  </ng-select>
</div>