如何在Angular应用程序中切换Bootstrap暗主题？

Question

如何在Angular应用程序中切换Bootstrap暗主题？

angularbootstrap-5darkmode

4

我想在我的Angular应用程序中添加Bootstrap暗色主题，但我不知道如何使用Angular在index.html中添加data-bs-theme="dark"。有什么想法吗？

我不知道如何使用Angular更改data-bs-theme属性。

- Sarah Ibrahim

1

在Google中搜索“Bootstrap暗色主题Angular”，并查看第一个结果：https://jfhr.me/angular-bootstrap-theme-switcher/。 - Flo

我在提到是否有一种方法可以在index.html中更改数据属性时已经很具体了，不是这种方式。 - Sarah Ibrahim

1

所以也要使用谷歌。https://dev59.com/rXQOtIcB2Jgan1znmrXv 有很多例子，很多方法。你只需要尝试一下就好了。 - Flo

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Flo · Accepted Answer

所以...你让我很好奇。因此，我尝试了一下。首先：这个功能，或者说是属性，只在Bootstrap 5.3.0中可用，而这个版本目前还处于Alpha测试阶段。

更新：

Bootstrap 5.3.0现已正式发布。所以你可以正常使用它了。

npm install boostrap@5.3.0-Alpha1

安装完成后，你可以使用 Attribute。但是：在 Angular 中，直接操作 index.html 并不是一个很好的方式。index.html 是应用的主入口点，而 Angular 使用底层的 <app-root> 作为最高级别。因此，我们不需要 index。你可以（而且应该 - 这样告诉我们 Bootstraps 的文档）在任何需要的组件上使用它，如 nav 或任何 div。

在 Angular 中，为了实现可切换性，将其绑定为属性：

<div [attr.data-bs-theme]="myTheme">
  <!-- Some Stuff -->
</div>

代码部分

...
myTheme: string = "light";

onSwitch() {
  if (this.myTheme === "light")
    this.myTheme = "dark";
  else
    this.myTheme = "light";
}
...

玩弄文档，看看“如何集成”。但是：像ng-bootstrap这样的包装器目前只支持这个alpha版本，而不是完整版本。