通过标题组件中的按钮切换类，这会通过Angular 6+影响主应用程序组件 [英] Toggle a class by a button from header component that affect main app component by Angular 6+
问题描述
我的Angular应用程序仅以 index.html 开头:
My app by Angular simply starts with index.html:
<body>
<app-root></app-root>
</body>
我希望通过在下面的< body> 和< body class ="dark-mode"> 之间切换来在暗/亮之间切换样式:
I would like it to be switched between Dark/Light by toggling between <body> and <body class="dark-mode"> with below styles:
body abcxyz {
color: #fff
}
body.dark-mode abcxyz {
color: #a2b3c4
}
接下来是 app.component.html ，其标题-主-页脚照常:
Next is app.component.html with Header - Main - Footer as usual:
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
header.component.html 有一个切换按钮:
<button (click)="onClickDarkMode()">Dark Mode</button>
我们需要一个这样的变量和一个函数，我将它们放在 header.component.ts 中:
We need a variable and a function like this to work, I put them in header.component.ts:
isDarkMode = false;
onClickDarkMode() {
this.isDarkMode = !this.isDarkMode;
}
这个想法似乎很容易实现，但是在添加到< body> 中的任何这些行的情况下，click事件似乎都无法触发:
This idea seems simple to implement, but the click event seems like it fires to nothing with any of these lines added to the <body>:
<body [class.dark-mode]="isDarkMode">
或
<body [ngClass]="{'dark-mode': isDarkMode}">
或
<body [ngClass]="isDarkMode ? 'dark-mode' : ''">
还有暗/亮"的想法吗，这是通过在< body> 内的类切换来实现的最佳方法吗?
Further more, with the idea of "Dark/Light", is this the best way to implement by toggling class inside the <body>?
推荐答案
您非常接近！我强烈建议您使用服务，以便您可以在组件之间有效共享状态.
You're pretty close! I would highly recommend using a service so that you can effectively share state between components.
基本上是一种服务:
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 :
You will use dependency injection to "expose" the ThemeService like so:
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) {
}
}
通过使用服务，您不仅可以共享状态，还可以从中央位置连接更多属性，例如字体大小等.
By using a service you can not only share state but also wire up more properties like font-size, etc from a central location.
我在 https://matthewdavis.io/theme-service上有一个简短的教程，说明如何进行连接伴随项目回购 https://github.com/mateothegreat/ng-byexamples-主题服务.
希望这对您的旅程有帮助.随时提出问题！
Hope this helps you along your journey. Feel free to ask questions!
这篇关于通过标题组件中的按钮切换类，这会通过Angular 6+影响主应用程序组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
