我是角度世界的新bie现在我已经开发了以下程序来动态加载主题,如下所示
my-scss-file.scss :
@import '~@angular/material/core/theming/all-theme';
@include md-core();
$primary: md-palette($md-deep-purple);
$accent: md-palette($md-amber);
$theme: md-light-theme($primary, $accent);
@include angular-material-theme($theme);
.dark-theme {
$dark-p: md-palette($md-deep-purple, 700);
$dark-a: md-palette($md-amber);
$dark-t: md-dark-theme($dark-p, $dark-a);
@include angular-material-theme($dark-t);
}
my-html-file.html :
<div [class.dark-theme]="isDarkTheme">
<button (click)="toggleTheme()">Toggle theme</button>
my-ts-file.ts :
@Component({
selector: 'your-component-selector',
templateUrl: './my-html-file.html',
styleUrls: ['my-scss-file.scss']
})
export class YourComponent implements {
// by default, if you do not want the dark theme
private isDarkTheme = false;
constructor() { }
toggleTheme() {
this.isDarkTheme = !this.isDarkTheme;
}
}
现在输出如下所示 output of the above angular app
现在我的查询是,与这些按钮一起,我想添加如下所示的图像,这些图像将与点击按钮一起显示
how the tentative image should be there
所以为此我已经在我的项目中添加了图像文件夹,我现在保留图像请告知我应该在我的.scss文件中添加图片网址以实现此目的
我工作区中的图像文件夹位置 images folder location in my workspace
下面是我的.angular-cli.json文件内容
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "dynamic-material-theming"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css",
"theme.scss"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json"
},
{
"project": "src/tsconfig.spec.json"
},
{
"project": "e2e/tsconfig.e2e.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}