我创建了自己的scss主题并在angular-cli.json中声明了它,一切正常.
现在我需要动态更改主题.
我试图在angular-cli.json中添加第二个主题,但正如预期的那样它会覆盖第一个主题.
因此,也许有一个选择是从angular-cli.json中删除主题声明,并且有两个组件,每个组件都有自己的scss样式,一个覆盖另一个,它们之间的唯一区别是styleUrls.
或者是否有其他推荐的动态加载scss的方法?
从Angular 5.1开始,这就是我实现动态主题更改的方式.
*编辑:这仍然适用于Angular 6
工作可编辑示例 – https://stackblitz.com/edit/dynamic-material-theming
在我的theme.scss文件中,我包含一个默认主题(注意它不是保存在类名下 – 这是Angular将它用作默认值),然后是一个明暗主题.
theme.scss
@import '~@angular/material/theming'; @include mat-core(); // Typography $custom-typography: mat-typography-config( $font-family: Raleway,$headline: mat-typography-level(24px,48px,400),$body-1: mat-typography-level(16px,24px,400) ); @include angular-material-typography($custom-typography); // Default colors $my-app-primary: mat-palette($mat-teal,700,100,800); $my-app-accent: mat-palette($mat-teal,800); $my-app-theme: mat-light-theme($my-app-primary,$my-app-accent); @include angular-material-theme($my-app-theme); // Dark theme $dark-primary: mat-palette($mat-blue-grey); $dark-accent: mat-palette($mat-amber,A200,A100,A400); $dark-warn: mat-palette($mat-deep-orange); $dark-theme: mat-dark-theme($dark-primary,$dark-accent,$dark-warn); .dark-theme { @include angular-material-theme($dark-theme); } // Light theme $light-primary: mat-palette($mat-grey,200,500,300); $light-accent: mat-palette($mat-brown,200); $light-warn: mat-palette($mat-deep-orange,200); $light-theme: mat-light-theme($light-primary,$light-accent,$light-warn); .light-theme { @include angular-material-theme($light-theme) }
在app.component文件中,我包含来自@ angular / cdk / overlay的OverlayContainer.你可以在这里找到Angular的文档https://material.angular.io/guide/theming;虽然他们的实施有点不同.请注意,我还必须在App.module中包含OverlayModule作为导入.
在我的app.component文件中,我还声明了@HostBinding(‘class’)componentCssClass;作为变量,将用于将主题设置为类.
app.component.ts
import {Component,HostBinding,OnInit} from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Version } from './classes/version'; import { OverlayContainer} from '@angular/cdk/overlay'; @Component({ selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'],}) export class AppComponent implements OnInit { constructor(private http: HttpClient,public overlayContainer: OverlayContainer) {} title = 'app'; version: Version; @HostBinding('class') componentCssClass; ngOnInit() { this.getVersion(); } onSetTheme(theme) { this.overlayContainer.getContainerElement().classList.add(theme); this.componentCssClass = theme; } getVersion() { this.http.get<Version>('/api/version') .subscribe(data => { this.version = data; }); } }
app.module.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { HttpClientModule } from '@angular/common/http'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatCardModule } from '@angular/material/card'; import { MatButtonModule } from '@angular/material/button'; import { AppComponent } from './app.component'; import { OverlayModule} from '@angular/cdk/overlay'; @NgModule({ declarations: [ AppComponent,],imports: [ BrowserModule,HttpClientModule,BrowserAnimationsModule,MatCardModule,MatButtonModule,OverlayModule ],providers: [],bootstrap: [AppComponent] }) export class AppModule {}
app.component.html
<button mat-raised-button color="primary" (click)="onSetTheme('default-theme')">Default</button> <button mat-raised-button color="primary" (click)="onSetTheme('dark-theme')">Dark</button> <button mat-raised-button color="primary" (click)="onSetTheme('light-theme')">Light</button>
您可以考虑使用observable,以便功能更加动态.