Question

我正在尝试通过点击我的网络应用上的切换来实现日/夜功能。

我知道如何使用导航菜单将其添加到单个组件中，但我需要将它添加到多个组件中。

我找到的解决方案之一是使用ng-deep，但在主CSS中以这种方式执行它感觉有点不对。

我想到的另一个解决方案是创建一个service并订阅每个组件中的切换，但这又感觉就像是一种过度杀伤。

我的问题是：我可以通过一次切换更改多个组件的样式吗？

宁愿不使用JS。

目前，我的app.component看起来像这样

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

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

export class AppComponent {
  title = 'Optimus Engine';
  version = 'Latest';

  day = true;

  constructor(private element: ElementRef) {

  }

  dayNight() {

    if (!this.day) {
      this.element.nativeElement.classList.add('night');
    }

    if (this.day) {
      this.element.nativeElement.classList.remove('night');
    }

    this.day = !this.day;

   //BTW for some reason it does not remove the class but that's a different problem.
  }

}

然后在我的模板上：

<div class="toggle-box" (click)="dayNight()">
    <input type="checkbox" name="checkbox1" id="toggle-box-checkbox" />
    <label for="toggle-box-checkbox" class="toggle-box-label-left"></label>
    <label for="toggle-box-checkbox" class="toggle-box-label"></label>
</div>

然后在更少的时候：

:host.night h1 {
    transition: all 1s;
        color: aliceblue;
}

但这只适用于h1，我想知道如何通过切换来改变其他组件。

Answer 1

您可以使用服务传播跨多个组件的值。

例如，像这样的服务：

export class ThemeService {

    private modeSubject: BehaviorSubject<'day'|'night'> = new BehaviorSubject<'day'|'night'>('day');

    public get mode():Observable<'day'|'night'>{
        return this.modeSubject.asObservable();
    }

    public switchMode(newMode:'day'|'night'):void{
        this.modeSubject.next(newMode);
    }

}

然后，在您的组件中，只需订阅mode observable：

...
...
constructor(themeService: ThemeService){
    themeService.mode.subscribe(mode => this.theme = mode);
}
...
...

最后，使用[ngClass]将主题绑定到您的模板：

任何实现此逻辑的组件都将以您的主题模式（白天或夜晚）切换。

请记住，我在这里使用了两个字符串，但你可以肯定使用枚举，这些只是用于示例。

我可以使用一个切换更改多个组件的样式

1 个答案: