我正在使用角度,我正在尝试在浅色和深色主题之间切换。拨动开关在我的标题组件中。请看下面
而且我的标头组件是应用程序组件中的子组件。另请参见
// 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来基于布尔值有条件地设置它。
我正在使用角度,我正在尝试在浅色和深色主题之间切换。拨动开关在我的标题组件中。请参见下面,我的标头组件是应用程序中的子组件...