angular - 如何在 Angular 6 中为不同的 ng-select 使用默认和 Material 主题

Question

我需要使用 ng-select在我的页面上有一个 Material 主题，以及 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";
}

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

有没有办法通过使用上面的类来使用这两个主题？ :)

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>