Javascript 当我点击开关时，如何切换角度为黑色的主题？

我使用角度，我试图在明暗主题之间切换。切换开关位于“我的标题”组件中。请看下面

“我的头”组件是应用程序组件中的子组件。另见下文

// app.component.html    

    <app-header (mode)="receiveMode($event)"></app-header>

     <router-outlet></router-outlet>

然后，我从app.component.html文件中的app头接收布尔值

// app.component.html

    <app-header (mode)="receiveMode($event)"></app-header>

    <router-outlet></router-outlet>

---

我想知道如何使用ngClass或ngStyle根据布尔值有条件地设置它。

这里有一种方法：

<div [ngClass]="{
  darkTheme: setMode
}">
</div>

您还可以在同一个类中添加其他类和条件

另一个：

<div [class.darkTheme]="setMode"></div>

编辑：正如我在评论中提到的，我更喜欢这种方法：

<link rel="stylesheet" href="/theme/css/dark-theme.min.css" *ngIf="setMode">

查看我为这个问题创建的Stackblitz

app.component.ts：

import { Component, ViewEncapsulation } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
  encapsulation: ViewEncapsulation.ShadowDom
})
export class AppComponent {
  setMode = false;

  receiveMode($event) {
    this.setMode = $event;
    console.log("MODEEEE", this.setMode);
  }
}

您需要在app.component装饰中使用

封装：ViewEncapsulation.ShadowDom

，才能在其子组件中使用父组件的样式。请参见，这是因为

：：ng deep

不推荐使用。有关详细信息，请参见

app.component.html

<div id="main-container" [ngClass]="[setMode ? 'darkTheme' : '']">

    <app-header (mode)="receiveMode($event)"></app-header>

    <router-outlet></router-outlet>

</div>

<nav>
    <a routerLink="/" routerLinkActive="is-active" [routerLinkActiveOptions]="{exact: true}" class="nav-link" tabindex="1">
        Home
    </a>
    <a routerLink="/about" routerLinkActive="is-active" [routerLinkActiveOptions]="{exact: true}" class="nav-link" tabindex="1">
        About
    </a>

  <button (click)="onChangeToggle()">Toggle Theme</button>
</nav>

header.component.html

<div id="main-container" [ngClass]="[setMode ? 'darkTheme' : '']">

    <app-header (mode)="receiveMode($event)"></app-header>

    <router-outlet></router-outlet>

</div>

<nav>
    <a routerLink="/" routerLinkActive="is-active" [routerLinkActiveOptions]="{exact: true}" class="nav-link" tabindex="1">
        Home
    </a>
    <a routerLink="/about" routerLinkActive="is-active" [routerLinkActiveOptions]="{exact: true}" class="nav-link" tabindex="1">
        About
    </a>

  <button (click)="onChangeToggle()">Toggle Theme</button>
</nav>

家
关于
切换主题

Hi，我尝试了此操作，但我的组件无法访问应用程序组件中的设置模式。因为没有父子关系，所以它也不能通过Input（）或Output（）传递。谢谢你的回复@kennyman335我只回答了“我想知道如何使用ngClass或ngStyle根据布尔值有条件地设置它”，这是你文章中唯一可以考虑的问题。此外，如果您正在使用一个主题，那么任何子组件都应该不受主题更改的影响。你最好导入一个以html元素为目标的dark-theme.css，并根据你的布尔值将其删除。我将撤销我在之前的评论中提到的内容，因为我记得，设计样式的角度方法是避免全局样式，更多的是隔离，如果这是任何其他应用程序，那么我会按照我前面所说的。您的应用程序缺少的是状态管理。如果您有redux来存储应用程序状态，那么您可以在任何组件上设置暗主题时获得布尔值。在[ngClass]中使用这一点，您应该可以很好地使用。您好，您对状态管理的看法绝对正确。我设法找到了为什么它没有显示黑色的问题。在我取出home组件的HTML和Body标记后，它就工作了。我发现其他没有标记的组件可以在明暗之间切换，我想这与html和body标记的存在有关。现在，我正在研究如何设置状态管理，因为布尔值在切换选项卡后设置为false，这将布尔值设置为默认值。谢谢只需将

darkTheme

类添加到您的文档体中即可。cst感谢您的响应。但是我试过了，它还是不起作用

#main-container{
  width: 100%;
  min-height: 100vh;
}

#main-container.darkTheme {
  background-color: #000;
}

#main-container.darkTheme h1{
 color: white;
}

#main-container.darkTheme nav{
 background-color: #fafafa;
}

#main-container.darkTheme .nav-link{
 color: #000;
}

#main-container.darkTheme .nav-link.is-active{
 color: #cb2d67;
}

<nav>
    <a routerLink="/" routerLinkActive="is-active" [routerLinkActiveOptions]="{exact: true}" class="nav-link" tabindex="1">
        Home
    </a>
    <a routerLink="/about" routerLinkActive="is-active" [routerLinkActiveOptions]="{exact: true}" class="nav-link" tabindex="1">
        About
    </a>

  <button (click)="onChangeToggle()">Toggle Theme</button>
</nav>