Angular 在组件中使用相同的主题

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

我读过angularjs的教程，也读过Material2的主题。 我还检查了 但是他们只使用一个组件，我想对每个人应用相同的主题。 我不知道如何才能做到这一点

这是目前为止的结构。

应用程序组件.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>

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

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

}

如果我理解正确的话，那是因为主题是封装的。 但是，当我按下“切换主题”按钮时，它也会应用到其他组件，我怎么能通过它呢？ 例如，当我在app.component中切换时，我希望dashboard.component中的相同主题（app.component.scss）从亮变暗

这就是它现在的样子：

---

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

如果是这样，您应该查看以下链接：

特别是这一部分：

@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暗主题类）添加到父组件模板中

---

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

谢谢，我发现了一个愚蠢的错误。。。将此“封装：视图封装.无”添加到app.component.ts。