Как использовать тему по умолчанию и тему материала для разных ng-select в Angular 6

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.s css

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