我想在我的Angular应用程序中添加Bootstrap暗色主题,但我不知道如何使用Angular在index.html中添加data-bs-theme="dark"。有什么想法吗?
我不知道如何使用Angular更改data-bs-theme属性。
我不知道如何使用Angular更改data-bs-theme属性。
属性
,只在Bootstrap 5.3.0中可用,而这个版本目前还处于Alpha测试阶段。
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";
}
...