以下是一个示例代码,演示了如何在Angular中实现Bootstrap 4的深色和浅色模式切换。
首先,确保你已经安装了Bootstrap和Angular,并将Bootstrap的CSS和JS文件导入到你的项目中。
在app.component.html文件中添加一个按钮,用于切换深色和浅色模式:
在app.component.ts文件中,添加一个变量来追踪当前的模式,并实现toggleDarkMode方法来切换模式:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
darkMode = false;
toggleDarkMode() {
this.darkMode = !this.darkMode;
const body = document.getElementsByTagName('body')[0];
if (this.darkMode) {
body.classList.add('dark-mode');
} else {
body.classList.remove('dark-mode');
}
}
}
在app.component.css文件中,添加一个.dark-mode类来定义深色模式的样式:
.dark-mode {
background-color: #333;
color: #fff;
}
这样,当用户点击切换模式按钮时,toggleDarkMode方法会在darkMode变量中切换值,并根据当前的模式来添加或移除.dark-mode类。
注意:在实际项目中,建议使用Angular的Renderer2服务来修改DOM元素的样式,而不是直接操作DOM。这里为了简单起见,直接使用了DOM操作。
希望这个示例能帮助到你!