Angular Material2 对不同的构建/环境使用不同的主题（颜色）

Question

我有一个 Angular6 应用程序，它使用 CLI 和 material2 以及自定义主题。现在对于另一个客户，我想使用相同的应用程序，但颜色不同。我怎样才能做到这一点？我不想维护第二个代码库，所以它必须与我认为的构建和/或环境有关？

我在styles.scss中导入的主题：

@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here 
so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme using the Material Design 
palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a 
default, lighter, and darker
// hue.
$app-primary: mat-palette($mat-blue, 500);
$app-accent: mat-palette($mat-blue, 900);

// The warn palette is optional (defaults to red).
$app-warn: mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each 
component
// that you are using.
@include angular-material-theme($app-theme);

Answer 1

如果您使用 angular 6，则可以使用 angular.json 中的 fileReplacements 配置部分。 使用它，您可以让文件 customer1.theme.scss 仅在为特定环境构建时替换文件 theme.scss。

这是一个例子：

{
  "projects": {
    "myproject": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "projects/customer/src/environments/environment.ts",
                  "with": "projects/customer/src/environments/environment.prod.ts"
                },
                {
                  "replace": "projects/customer/src/themes/theme.scss",
                  "with": "projects/customer/src/themes/theme.prod.scss"
                }
              ]
            }
          }
        }
      }
    }
  }
}

Answer 2

您可以采取的一种方法是为此使用基本的 CSS 类。在您的主题文件中，定义不同的主题：

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

@include mat-core();

// Define a default theme
$light-default-primary: mat-palette($mat-blue);
$light-default-accent:  mat-palette($mat-blue-grey, A200, A100, A400);
$light-default-warn:    mat-palette($mat-red);
$light-default-theme:   mat-light-theme($light-default-primary, $light-default-accent, $light-default-warn);
@include angular-material-theme($light-default-theme);

.light-blue-theme {

  $light-blue-primary: mat-palette($mat-blue);
  $light-blue-accent:  mat-palette($mat-blue-grey, A200, A100, A400);
  $light-blue-warn:    mat-palette($mat-red);
  $light-blue-theme:   mat-light-theme($light-blue-primary, $light-blue-accent, $light-blue-warn);

  @include angular-material-theme($light-blue-theme);
}

.dark-theme {

  $dark-primary: mat-palette($mat-cyan);
  $dark-accent:  mat-palette($mat-blue-grey, A200, A100, A400);
  $dark-warn:    mat-palette($mat-deep-orange);
  $dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);

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

在您的 evnironments.ts 文件中，定义客户：（我猜您需要为每个客户提供单独的环境）

export const client = {
 clientName: 'xxx'
}

在你的组件中你可以设置当前客户：

export class AppComponent { 
  public clientName: string = this.env.client.clientName; // imported from environments.ts
...

然后在您的模板中，您可以将相关的类添加到您的主容器中：

<div [class.light-blue-theme]="clientName === 'xxx'" [class.dark-theme]="clientName === 'yyy'">
  ...
</div>