html - 通过标题组件中的按钮切换类，这会通过Angular 6+影响主应用程序组件(Toggle a class by a button from header component that affect main app component by Angular 6+)

Question

Welcome To Ask or Share your Answers For Others

html - 通过标题组件中的按钮切换类，这会通过Angular 6+影响主应用程序组件(Toggle a class by a button from header component that affect main app component by Angular 6+)

posted Mar 6, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - 通过标题组件中的按钮切换类，这会通过Angular 6+影响主应用程序组件(Toggle a class by a button from header component that affect main app component by Angular 6+)

My app by Angular simply starts with index.html :

(我的Angular应用只是以index.html开头：)

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

I would like it to be switched between Dark/Light by toggling between <body> and <body class="dark-mode"> with below styles:

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

body abcxyz {
  color: #fff
}

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

Next is app.component.html with Header - Main - Footer as usual:

(接下来是app.component.html，其中“页眉-主-页脚”与往常一样：)

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

The header.component.html has a toggle button:

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

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

We need a variable and a function like this to work, I put them in header.component.ts :

(我们需要一个变量和一个像这样的函数才能工作，我将它们放在header.component.ts中 ：)

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

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> :

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

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

or

(要么)

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

or

(要么)

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

Further more, with the idea of "Dark/Light", is this the best way to implement by toggling class inside the <body> ?

(再者，以“暗/亮”的想法，这是在<body>内部切换类的最佳实现方式吗？)

ask by nambk translate from so

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-03-06T03:29:55+0000

You're pretty close!

(你很亲密！)

I would highly recommend using a service so that you can effectively share state between components.

(我强烈建议您使用服务，以便您可以在组件之间有效共享状态。)

Basically what it looks like is a service:

(基本上看起来像是服务：)

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;

    }

}

and the component:

(和组件：)

<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>

You will use dependency injection to "expose" the ThemeService like so:

(您将使用依赖项注入来“公开” 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) {

    }

}

By using a service you can not only share state but also wire up more properties like font-size, etc from a central location.

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

I have a brief tutorial explaining how to wire things up at https://matthewdavis.io/theme-service accompanied by the project repo https://github.com/mateothegreat/ng-byexamples-theme-service .

(我有一个简短的教程，说明如何在https://matthewdavis.io/theme-service上进行接线，并附带项目回购https://github.com/mateothegreat/ng-byexamples-theme-service 。)

Hope this helps you along your journey.

(希望这对您的旅程有所帮助。)

Feel free to ask questions!

(随意问的问题！)

Categories

html - 通过标题组件中的按钮切换类，这会通过Angular 6+影响主应用程序组件(Toggle a class by a button from header component that affect main app component by Angular 6+)

html - 通过标题组件中的按钮切换类，这会通过Angular 6+影响主应用程序组件(Toggle a class by a button from header component that affect main app component by Angular 6+)

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags