如何在角度应用程序中切换引导黑暗主题？

Question

我想将 bootstrap 深色主题添加到我的 Angular 应用程序中，但我不知道如何使用 Angular 在 index.html 中添加 data-bs-theme="dark" ？任何想法？？

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

Answer 1

所以...你让我很好奇。为此我也尝试过。第一：这个功能，或者Attribute说，仅在Bootstrap 5.3.0中可用，目前仍处于 Alpha 阶段。

更新：

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

npm install boostrap@5.3.0-Alpha1

此后您可以使用Attribute. 但是：在 Angular 中，这不是操作 index.html 的好方法。它是应用程序的主要入口，Angular 使用底层<app-root>作为最高级别。所以我们不需要索引。您可以（并且应该 - 所以 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-boostrap支持目前尚未完整。