コンポーネントで同じテーマを使用する

Question

アングル4とマテリアル2で再生しています。 私は複数のテーマを作りたいと思います。

私はangularjsのチュートリアルを読んでも、材料2 上のテーマについて読んだ私はまたhttps://material2-app.firebaseapp.com/ で例を確認しかし、彼らは、ただ1つのコンポーネントを使用して、私は皆に同じテーマを適用したいです。 これを可能にする方法はありません。 ：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 { 

} 

私がこの権利を理解しているのは、テーマがカプセル化されているからです。 しかし、「トグルテーマ」を押すと、他のコンポーネントにも適用されます。すなわち、 私は光から闇

に変更するために、私はdashboard.componentに同じテーマ（app.component.scssを）したいapp.componentに切り替えたときに、これは、それが今のようになります。

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); 
} 

をので、あなたは自分のindex.htmlに生産の.cssファイルが含まれ、.scssファイルをコンパイルする必要があり、その後、追加しますクラス（ここでは.unicorn-dark-themeクラス）を親コンポーネントテンプレートに追加します。

デフォルトのテーマに戻したい場合は、そのクラスを削除するだけです。