如何在Angular中切换暗黑模式

Question

如何在Angular中切换暗黑模式

4

我正在尝试在用户切换开关时切换暗模式，该开关位于标题组件中。请参见下面的图像：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" href="/">Home <span class="sr-only">(current)</span></a>
        <a class="nav-item nav-link" href="/about">About</a>
        <a class="nav-item nav-link" href="/contact">Contact</a>
        <a class="nav-item nav-link" href="/resume">Resume</a>
      </div>
    </div>
    <div class="custom-control custom-switch">
        <input (change)="onChangeToggle()" type="checkbox" class="custom-control-input" id="toggleTheme">
        <label class="custom-control-label" for="toggleTheme">Dark Mode</label>
      </div>
  </nav>

我的头部组件 ts 文件保存了一个名为 setDark 的布尔值，该值通过 Output 装饰器在事件发射器中触发：

// 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.html中接收布尔值。

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

  <router-outlet></router-outlet>



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

我尝试将 div 包装在 app-header 和 router-outlet 周围，像这样：

<app-header (mode)="receiveMode($event)"></app-header>
<div class="darkTheme">
  <router-outlet></router-outlet>

使用 ngClass：

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

但它不起作用。我检查了在切换开关时布尔值是否被记录到控制台中，它确实被记录了。

- UI Developer

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gsa.interactive · Accepted Answer

请查看这个 StackBlitz: https://stackblitz.com/edit/angular-rubaka?file=src/app/toolbar-multirow-example.html

它在 #container:ElementRef 上切换 "dark-theme" 类:

<div #container style="padding: 4rem;" class="mat-typography dark-theme">

styles.scss 在第28行定义了两种不同的主题(默认主题)...

// Include the default theme styles.
@include angular-material-theme($candy-app-theme);

在第39行（暗主题）...

.dark-theme {
  @include angular-material-theme($dark-theme)
};

希望这能帮到你。