单击开关时如何在Angular中切换深色主题?

问题描述 投票:0回答:2

我正在使用角度,我正在尝试在浅色和深色主题之间切换。拨动开关在我的标题组件中。请看下面

enter image description here

而且我的标头组件是应用程序组件中的子组件。另请参见

// app.component.html    

    <app-header (mode)="receiveMode($event)"></app-header>

     <router-outlet></router-outlet>

因此,我在标题组件TS文件中为切换主题设置了布尔值

// header.component.ts

import { Component, OnInit , Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  @Output() mode = new EventEmitter<boolean>();

  setDark = false;

  constructor() { }

  ngOnInit(): void {

  }

  onChangeToggle() {
    this.setDark = !this.setDark;
    this.mode.emit(this.setDark);
    console.log(this.setDark);
  }

}

然后,我使用输出装饰器将该值传递给父组件,并在app.component.ts文件中接收它,以便所有其他组件也可以具有主题(而不仅仅是HomeComponent)。

// app.component.ts

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

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

  setMode = false;

  receiveMode($event) {
    this.setMode = $event;
    console.log("MODEEEE", this.setMode);
  }


  title = 'about-me';
}

然后我从app.component.html文件中的app-header接收布尔值

// app.component.html

    <app-header (mode)="receiveMode($event)"></app-header>

    <router-outlet></router-outlet>

并且我在styles.css中将darkTheme类添加到了我的全局样式表中>

.darkTheme {
    background-color: black;
}

我想知道如何使用ngClass或ngStyle来基于布尔值有条件地设置它。

我正在使用角度,我正在尝试在浅色和深色主题之间切换。拨动开关在我的标题组件中。请参见下面,我的标头组件是应用程序中的子组件...

javascript html css angular class
2个回答
0
投票

这里是一种方法:


0
投票

检查此问题我创建的Stackblitz https://stackblitz.com/edit/angular-ivy-prkazr

© www.soinside.com 2019 - 2024. All rights reserved.