Question

我正在玩角4和材料2。我想制作多个主题，我可以切换。

我已阅读有关angularjs的教程，并阅读有关材料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 {

}

如果我理解这是正确的，因为主题是封装的。但是，当我按下“切换主题”时，我怎么能通过呢？它还适用于其他组件？ IE浏览器。当我在app.component中切换时，我希望dashboard.component中的相同主题（app.component.scss）从浅色变为暗色

这就是现在的样子：

Answer 1

如果我理解得很好，您想在点击“切换主题”按钮时更改应用的整个主题？

如果是这样，您应该看一下这个链接：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文件轻松创建多个主题。

你也可以轻松地将它们链接到一个班级：

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

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

如果你想回到默认主题，你只需删除该类。

在组件中使用相同的主题

1 个答案: