通过 Angular 6+ 影响主应用程序组件的标题组件中的按钮切换类

Question

我的 Angular 应用程序以index.html开头：

<body>
  <app-root></app-root>
</body>

我希望通过使用以下样式在<body>和<body class="dark-mode">之间切换来在暗/亮之间切换：

body abcxyz {
  color: #fff
}

body.dark-mode abcxyz {
  color: #a2b3c4
}

接下来是app.component.html与 Header - Main - Footer 照常：

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

header.component.html有一个切换按钮：

<button (click)="onClickDarkMode()">Dark Mode</button>

我们需要一个变量和一个像这样的函数来工作，我把它们放在header.component.ts 中：

isDarkMode = false;
onClickDarkMode() {
  this.isDarkMode = !this.isDarkMode;
}

这个想法似乎很容易实现，但是单击事件似乎在将以下任何行添加到<body>不会触发：

<body [class.dark-mode]="isDarkMode">

或者

<body [ngClass]="{'dark-mode': isDarkMode}">

或者

<body [ngClass]="isDarkMode ? 'dark-mode' : ''">

此外，根据“黑暗/光明”的想法，这是通过在<body>内部切换类来实现的最佳方式吗？

Answer 1

你很接近！ 我强烈建议使用服务，以便您可以有效地在组件之间共享状态。

基本上它看起来像一个服务：

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

@Injectable({
    providedIn: 'root'
})
export class ThemeService {

    /**
     * Variable to hold our setting.
     */
    public darkMode: boolean;

    /**
     * Enable/disable "dark mode" by flipping the bit.
     */
    public toggle(): void {

        this.darkMode = !this.darkMode;

    }

}

和组件：

<div class="wrapper" [class.dark-mode]="themeService.darkMode">

    <div class="text">

        Dark Mode Enabled? {{ themeService.darkMode ? 'YES' : 'NO' }}

    </div>

    <div class="button">

        Parent Component

        <button (click)="themeService.toggle()">Toggle!</button>

    </div>

    <app-child></app-child>

</div>

您将使用依赖注入来“公开” ThemeService如下所示：

import { Component }    from '@angular/core';
import { ThemeService } from './theme.service';

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

    /**
     * Inject the theme service which will be called by our button (click).
     *
     * @param {ThemeService} themeService instance.
     */
    public constructor(public themeService: ThemeService) {

    }

}

通过使用服务，您不仅可以共享状态，还可以从中心位置连接更多属性，如字体大小等。

我有一个简短的教程解释了如何在https://matthewdavis.io/theme-service以及项目仓库https://github.com/mateothegreat/ng-byexamples-theme-service 上进行连接。

希望这对您的旅程有所帮助。 随意问的问题！

Answer 2

组件及其变量的作用域在 Angular 中。 这意味着，组件中的公共变量（如isDarkMode ）仅由组件本身和模板知道。 该变量没有全局表示。

虽然这有效：

<app-header>
  <div [ngClass]="{'dark-mode': isDarkMode}">
</app-header>

这不会：

<body [ngClass]="{'dark-mode': isDarkMode}"></body>

---

您可以做的是在组件中设置body元素的类。 但请记住，您应该避免直接操作 DOM，并且您的应用程序应该与平台无关。

这就是为什么你应该使用 Angular 的依赖注入：

import { Component, OnInit, Renderer2, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.less']
})

export class HeaderComponent implements OnInit {
  darkMode: boolean = false;

  constructor(
    @Inject(DOCUMENT) private document: Document,
    private renderer: Renderer2,
  ) {}

  ngOnInit() {}

  toggleDarkMode() {
    this.darkMode = !this.darkMode;

    if (this.darkMode) {
      this.renderer.addClass(this.document.body, 'dark-mode');
    } else {
      this.renderer.removeClass(this.document.body, 'dark-mode');
    } 
  }
}

现在只有HeaderComponent可以更改类。 您应该通过使用服务使其更加通用，以便您可以执行以下操作：

• 从应用程序中的任何位置更改模式
• 通过事件可以在模式改变时通知其他组件