Angular 2 Material 动态主题 [英] Angular 2 Material Dynamic Themes
问题描述
我已经创建了自己的 scss 主题并在 angular-cli.json 中声明,一切正常.
I've created my own scss theme and declared it in angular-cli.json, all works fine.
现在我需要动态更改主题.
Now I need to dynamically change the theme.
我尝试在 angular-cli.json 中添加第二个主题,但正如预期的那样,它覆盖了第一个主题.
I've tried to add the second theme in angular-cli.json, but as expected it overrides the first one.
所以也许一种选择是从 angular-cli.json 中删除主题声明并有 2 个组件,每个组件都有自己的 scss 样式,一个覆盖另一个,它们之间的唯一区别是 styleUrls.
So maybe one option would be to remove the theme declaration from angular-cli.json and have 2 components, each with it's own scss style, one overriding the other, the only difference between them being the styleUrls.
或者是否有其他推荐的方法来动态加载 scss?
Or is there other recommended way to load dynamically a scss?
推荐答案
从 Angular 5.1 开始,这是我实现动态主题更改的方式.
As of Angular 5.1, this is how I achieved dynamic theme changes.
*这仍然适用于 Angular 7+
* This still works as of Angular 7+
工作可编辑示例 - https://stackblitz.com/edit/dynamic-material-theming
在我的 theme.scss 文件中,我包含了一个默认主题(注意它没有保留在类名下 - 这是 Angular 将使用它作为默认值),然后是一个明暗主题.
In my theme.scss file, I include a default theme(notice it isn't kept under a class name - this is so Angular will use it as the default), and then a light and dark theme.
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, 700, 100, 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 作为导入.
In the app.component file, I include OverlayContainer from @angular/cdk/overlay. You can find Angular's documentation for this here https://material.angular.io/guide/theming; though their implementation is a little different. Please note, I also had to include OverlayModule as an import in app.module as well.
在我的 app.component 文件中,我还将 @HostBinding('class') componentCssClass;
声明为一个变量,用于将主题设置为一个类.
In my app.component file, I also declared @HostBinding('class') componentCssClass;
as a variable, which will be used to set the theme as a class.
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 {}
最后,从您的视图中调用 onSetTheme 函数.
Finally, call the onSetTheme function from your view.
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 以使功能更加动态.
You might consider using an observable so that the functionality would be more dynamic.
这篇关于Angular 2 Material 动态主题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!