如何在Angular 6中将默认主题和材质主题同时用于不同的ng-select

Question

我需要在页面上使用ng-select作为主题，在另一页面上使用ng-select作为默认主题。

我在首页上尝试过

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

在第二页上：

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

和style.scss

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

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

是否可以通过使用上述类来同时使用两个主题？ ：）

Answer 1

如果您的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代码。希望它能工作。

• 首页

<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>