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

Question

我使用的是角度显示，试图在浅色和深色主题之间切换。拨动开关在我的标题组件中。请看下面

我的标头组件是应用程序组件中的子组件。另请参见

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

}

然后我使用输出装饰器将该值传递给父组件，并在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>