在组件中使用相同的主题

Question

我在玩 angular 4 和 material 2。我想制作多个主题，我可以切换。

我已经阅读了关于 angularjs 的教程，还阅读了关于 material 2 的主题。我还检查了 https://material2-app.firebaseapp.com/ 中的示例但他们只使用一个组件，我想将相同的主题应用到每个人。而且我不知道如何使这成为可能。 :S

这是目前的结构。

app.component.ts

import { Component, Optional } from '@angular/core';

import '../assets/css/styles.css';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  isDarkTheme: boolean = false;
}

app.component.html:

<main [class.theme-dark]="isDarkTheme">
    <md-sidenav-container>
        <md-sidenav class="sidenav" #start (open)="closeStartButton.focus()">
            Start Sidenav.
            <button md-button [routerLink]="['./dashboard']" routerLinkActive="active" (click)="start.close()">Dashboard</button>
            <br>
            <button md-button #closeStartButton (click)="start.close()">Close</button>
        </md-sidenav>
        <md-toolbar color="primary">
            <button class="icon-button" (click)="start.open()">
                <i class="material-icons toolbar-menu">menu</i>
            </button>
            Test
            <span class="toolbar-filler"></span>
            <button md-button (click)="isDarkTheme = !isDarkTheme">TOGGLE THEME</button>
        </md-toolbar>
        <div class="content">
            <router-outlet></router-outlet>
        </div>
    </md-sidenav-container>
</main>

dashboard.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'my-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: [ './dashboard.component.css' ]
})
export class DashboardComponent {

}

如果我没有理解错，那是因为主题被封装了。但是当我按下 "toggle theme" 时，我怎么能通过它也适用于其他组件？ IE。当我切换 app.component 时，我希望 dashboard.component 中的相同主题 (app.component.scss) 从浅色变为深色

这是现在的样子：

Answer 1

如果我理解得很好，您想在单击 "Toggle theme" 按钮时更改应用的整个主题吗？

如果是这样，你应该看看这个 link : https://material.angular.io/guide/theming#multiple-themes

尤其是这一部分：

@import '~@angular/material/theming';

@include mat-core();

$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);

// Default theme styles.
@include angular-material-theme($candy-app-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);

// Include the alternative theme styles inside of a block with a CSS class. You can make this
// CSS class whatever you want. In this example, any component inside of an element with 
// `.unicorn-dark-theme` will be affected by this alternate dark theme instead of the default theme. 
.unicorn-dark-theme {
  @include angular-material-theme($dark-theme);
}

您可以使用上面的 .scss 文件轻松创建多个主题。

您也可以 link 轻松地将它们 class :

.unicorn-dark-theme {
  @include angular-material-theme($dark-theme);
}

因此，您只需要编译 .scss 文件，将生成的 .css 文件包含到您的 index.html 中，然后添加 class 您想要（这里是.unicorn-dark-theme class）到你的父组件模板。

如果您想返回默认主题，只需删除 class。

在组件中使用相同的主题

Use same theme in component

angular-material2

angular