更改 ng-bootstrap 按钮 activeClass？

Question

在 AngularJs 应用程序中，我们将按钮的 activeClass（在切换组中）更改为 btn-default（从默认的 btn-primary），所以我们所有的CSS 期望如此。

我注意到 ng-bootstrap 也默认为 btn-primary，但我不知道如何更改（或 if）。

我是否可以更改 activeClass，以便我的 CSS 对于新组件是正确的？

Answer 1

ng-bootstrap 使用 bootstrap 4。 Bootstrap 4 包括 six predefined button styles，每个都有自己的语义目的。但它不包含 btn-default 但使用 btn-secondary class 可以实现相同的样式。

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-secondary" [class.active]="model.left">
    <input type="checkbox" [(ngModel)]="model.left"> Left (pre-checked)
  </label>
  <label class="btn btn-secondary" [class.active]="model.middle">
    <input type="checkbox" [(ngModel)]="model.middle"> Middle
  </label>
  <label class="btn btn-secondary" [class.active]="model.right">
    <input type="checkbox" [(ngModel)]="model.right"> Right
  </label>
</div>

如果您仍然喜欢使用 btn-default，那么您可以在您的组件样式中使用该名称制作一个 class 并使用它。

Answer 2

首先，您使用的 angular 是哪个版本？ ng版本之间有很大差异

ng-1 angularjs.org - docs

<button ng-class="{'class1 class2 class3' : true}">
    it's a button
</button>

ng-2/4 angular.io - docs

<button [ngClass]="{'class1 class2 class3' : true}">
    it's a button
</button>

更改 ng-bootstrap 按钮 activeClass？

Change ng-bootstrap buttons activeClass?

css

ng-bootstrap

angular