Angular 2材质动态主题 [英] 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.您可以在 https://material.angular.io/guide/theming 中找到Angular的文档. ;尽管它们的实现有些不同.请注意，我还必须将OverlayModule作为导入也包含在app.module中.

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>

您可能会考虑使用可观察的对象，以使功能更加动态.

You might consider using an observable so that the functionality would be more dynamic.

这篇关于Angular 2材质动态主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！