單擊開關時如何在 Angular 中切換深色主題？

Question

我正在使用 angular 並且我正在嘗試在淺色和深色主題之間切換。 撥動開關在我的 header 組件中。 請看下面

而我的 header 組件是 app 組件中的子組件。 另見下文

// app.component.html    

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

     <router-outlet></router-outlet>

因此，我在我的 header 組件 TS 文件中為切換主題設置了 boolean 值

// 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 接收 boolean 值

// app.component.html

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

    <router-outlet></router-outlet>

我在 styles.css 的全局樣式表中添加了 darkTheme class

.darkTheme {
    background-color: black;
}

我想知道如何使用 ngClass 或 ngStyle 根據 boolean 值有條件地設置它。

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

you need encapsulation: ViewEncapsulation.ShadowDom in your app.component decoration to enable using the parent's styles in it's children components see https://angular.io/api/core/ViewEncapsulation , this is because ::ng-deep is deprecated see 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>