时间戳

首页 > 解决方案 > 如何在 Angular 6 中为不同的 ng-select 使用默认主题和材质主题

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

问题描述

我需要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";
}

但生成的样式看起来像是材质和默认主题的组合。

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

标签： angularsass

解决方案

如果您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>

推荐阅读