单击开关时如何在 Angular 中切换深色主题？

Question

我正在使用 Angular，我正在尝试在浅色和深色主题之间切换。切换开关在我的标题组件中。请看下文

而我的header组件是app组件中的子组件。另见下文

// app.component.html    

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

     <router-outlet></router-outlet>

因此，我在我的头组件 TS 文件中设置了切换主题的布尔值

// header.component.ts

import { Component, OnInit , Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  @Output() mode = new EventEmitter<boolean>();

  setDark = false;

  constructor() { }

  ngOnInit(): void {

  }

  onChangeToggle() {
    this.setDark = !this.setDark;
    this.mode.emit(this.setDark);
    console.log(this.setDark);
  }

}

然后，我使用 Output 装饰器将该值传递给父组件，并在 app.component.ts 文件中接收它，以便所有其他组件也可以拥有主题（不仅仅是 HomeComponent）。

// app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  setMode = false;

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


  title = 'about-me';
}

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

// app.component.html

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

    <router-outlet></router-outlet>

我在styles.css 中将darkTheme 类添加到我的全局样式表中

.darkTheme {
    background-color: black;
}

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

Answer 1

这是一种方法：

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

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

另一个：

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

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

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

Answer 2

查看我为这个问题创建的 Stackblitz https://stackblitz.com/edit/angular-ivy-prkazr。

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 装饰中使用 encapsulation: ViewEncapsulation.ShadowDom 才能在其子组件中使用父样式，请参阅 https://angular.io/api/core/ViewEncapsulation，这是因为 ::ng-deep 已弃用，请参阅 https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep 了解更多信息。

app.component.html

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

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

    <router-outlet></router-outlet>

</div>

app.component.css

#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;
}

header.component.html

<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>