Html 通过标题组件中的按钮切换类，该按钮通过角度6+影响主应用程序组件；_Html_Angular_Typescript_Sass

Html 通过标题组件中的按钮切换类，该按钮通过角度6+影响主应用程序组件；

html angular typescript sass

Html 通过标题组件中的按钮切换类，该按钮通过角度6+影响主应用程序组件；,html,angular,typescript,sass,Html,Angular,Typescript,Sass,Angular的我的应用程序只是以index.html开始： <body> <app-root></app-root> </body> isDarkMode = false; onClickDarkMode() { this.isDarkMode = !this.isDarkMode; } 接下来是app.component.html，通常是页眉-Main-Footer： <app-header></app-heade

Angular的我的应用程序只是以index.html开始：

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

isDarkMode = false; onClickDarkMode() { this.isDarkMode = !this.isDarkMode; }
接下来是app.component.html，通常是页眉-Main-Footer：

<app-header></app-header> <router-outlet></router-outlet> <app-footer></app-footer>
这个想法似乎很容易实现，但单击事件似乎在
中添加任何一行后都不会触发：

或

或

此外，对于“暗/光”的概念，这是通过在
中切换类来实现的最佳方法吗？
您已经非常接近了！我强烈建议您使用服务，以便在组件之间有效地共享状态
基本上，它看起来是一种服务：

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>
通过使用服务，您不仅可以共享状态，还可以从中心位置连接更多属性，如字体大小等
我有一个简短的教程，解释如何在回购项目的伴随下将事情联系起来

希望这对你的旅程有所帮助。请随意提问
组件及其变量的范围为角度。这意味着，组件中的公共变量（如
isDarkMode
）仅由组件本身和模板知道。这个变量没有全局表示
虽然这样做有效：

<app-header> <div [ngClass]="{'dark-mode': isDarkMode}"> </app-header>
现在只有
HeaderComponent
可以更改类。您应该通过使用服务使其更加通用，以便您可以执行以下操作：

从应用程序中的任何位置更改模式

通过事件，可以在模式更改时通知其他组件

它可以工作！非常感谢你！你能帮我澄清一下上面两个构造函数中的这个属性声明吗：
public themeService:themeService
在app.component和child.component中，为什么这里是public，它们是相同的还是不同的？我是否可以在头中声明不同的内容，例如
public themeServiceHeader:ThemeService
，同时在App中声明
public themeServiceApp:ThemeService
？最后一个问题：
public constructor（）{}
的用途是什么？因为我可以看到
constructor（）{}
也可以工作，这些构造函数不需要公共的？它们是公共的，所以你可以从模板访问它。我只是养成了在所有方法中使用作用域的习惯：）我使用了一个
主题服务，通过在app.component.html中切换类“暗模式”，它对所有组件都很好，直到我发现在下，当然这些模式不起作用。我转向了另一种解决方案：我尝试将文档和渲染器2 注入到标题中，效果很好。但是我现在看到主题服务已被弃用，因此我将渲染器2 放入主题服务，但它拒绝工作！你能帮我保留主题服务，并且仍然能够将主题应用于所有组件（以及这些模态）吗？我使用了主题服务，通过在app.component.html中切换类'dark mode'，它对所有组件都有效，直到我发现在下，当然，这些情态动词不起作用。我转向您的解决方案，尝试将DOCUMENT 和Renderer2 注入到标题中，效果很好。但是我现在看到主题服务已被弃用，因此我将渲染器2 放入主题服务，但它拒绝工作！你能帮我保留主题服务，并且仍然能够将主题应用于所有组件（以及这些模态）吗？ <body [ngClass]="{'dark-mode': isDarkMode}"> <body [ngClass]="isDarkMode ? 'dark-mode' : ''"> 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> 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) { } } <app-header> <div [ngClass]="{'dark-mode': isDarkMode}"> </app-header> <body [ngClass]="{'dark-mode': isDarkMode}"></body> 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'); } } }