1

我正在用 Angular 材料编写一个 Angular 12 网站。该项目支持多个域，并且在不同的域上它应该显示不同的主题。

所以我在这里要解决的是能够通过延迟加载动态加载主题。

我的自定义主题有效..基本的角度材料功能不起作用，我确实收到了消息

Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming

我搜索了很多，如果我正确加载 css 文件并将其附加到头部，它应该可以正常工作。

好的..所以首先..

我创建了应用程序/主题目录

我有 3 个主题，windy.scss、windy-car.scss和windy-shop.scss，每个主题都需要common.scss.

我有几个组件使用我在每个文件中创建的具有特定颜色的变量，common.scss 实际上在选择颜色时装饰组件。

例如：

common.js包括：

app-root {

  div#my-mat-drawer {
    background: $container-bg;
  }

}

并windy.scss包含：

$container-bg:  #aabbcc;

我将展示一个 scss 文件作为示例，当我只使用一个主题时它可以工作，所以我知道格式很好。

这是windy.scss：

@use '../../node_modules/@angular/material/index' as mat;
$container-bg:  #aabbcc;
$container-color:  white;

$button1-color: #ccdd99;
$button2-color: #112233;

$product-card-text: red;

$category-title-bg: blue;

$product-categories-bg: yellow;

$toolbar-bg-color: green;

$dark-primary-text: rgba(black, 0.87);
$dark-secondary-text: rgba(black, 0.54);
$dark-disabled-text: rgba(black, 0.38);
$dark-dividers: rgba(black, 0.12);
$dark-focused: rgba(black, 0.12);
$light-primary-text: white;
$light-secondary-text: rgba(white, 0.7);
$light-disabled-text: rgba(white, 0.5);
$light-dividers: rgba(white, 0.12);
$light-focused: rgba(white, 0.12);

$my-cyan-palette: (
  50: #e0f7fa,
  100: #b2ebf2,
  200: #80deea,
  300: #4dd0e1,
  400: #26c6da,
  500: #00bcd4,
  600: #00acc1,
  700: #0097a7,
  800: #00838f,
  900: $button2-color,
  A100: #84ffff,
  A200: #18ffff,
  A400: #00e5ff,
  A700: #00b8d4,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $dark-primary-text,
  )
);

$my-lime-palette: (
  50: #f9fbe7,
  100: #f0f4c3,
  200: #e6ee9c,
  300: #dce775,
  400: #d4e157,
  500: #cddc39,
  600: #c0ca33,
  700: #afb42b,
  800: #9e9d24,
  900: $button1-color,
  A100: #f4ff81,
  A200: #eeff41,
  A400: #c6ff00,
  A700: #aeea00,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $dark-primary-text,
    600: $dark-primary-text,
    700: $dark-primary-text,
    800: $dark-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $dark-primary-text,
  )
);



$windy-store-primary: mat.define-palette($my-cyan-palette, 900);
$windy-store-accent: mat.define-palette($my-lime-palette,900); 
$windy-store-warn: mat.define-palette($my-cyan-palette,900);

 $windy-store-theme: mat.define-light-theme((
  color: (
    primary: $windy-store-primary,
    accent: $windy-store-accent,
    warn: $windy-store-warn,
  )
));

@include mat.all-component-themes($windy-store-theme);
@import "common";

现在..在 angular.json 我添加了这些文件inject: false：

"styles": [
              "src/styles.scss",
              {
                "input": "src/themes/windy.scss",
                "bundleName": "windy",
                "inject": false
              },
              {
                "input": "src/themes/windy-car.scss",
                "bundleName": "windy-car",
                "inject": false
              },
              {
                "input": "src/themes/windy-shop.scss",
                "bundleName": "windy-shop",
                "inject": false
              }
            ]

我创建了一个 style-manager 服务和一个 theme.service 并将它们添加到app.module.ts.

样式管理器service.ts

/**
 * Copied from https://github.com/angular/material.angular.io/blob/master/src/app/shared/style-manager/style-manager.ts
 */

import { Injectable } from "@angular/core";

@Injectable()
export class StyleManagerService {
  constructor() {}

  /**
   * Set the stylesheet with the specified key.
   */
  setStyle(key: string, href: string) {
    getLinkElementForKey(key).setAttribute("href", href);
  }

  /**
   * Remove the stylesheet with the specified key.
   */
  removeStyle(key: string) {
    const existingLinkElement = getExistingLinkElementByKey(key);
    if (existingLinkElement) {
      document.head.removeChild(existingLinkElement);
    }
  }
}

function getLinkElementForKey(key: string) {
  return getExistingLinkElementByKey(key) || createLinkElementWithKey(key);
}

function getExistingLinkElementByKey(key: string) {
  return document.head.querySelector(
    `link[rel="stylesheet"].${getClassNameForKey(key)}`
  );
}

function createLinkElementWithKey(key: string) {
  const linkEl = document.createElement("link");
  linkEl.setAttribute("rel", "stylesheet");
  linkEl.setAttribute("type", "text/css");
  linkEl.classList.add(getClassNameForKey(key));
  document.head.appendChild(linkEl);
  return linkEl;
}

function getClassNameForKey(key: string) {
  return `app-${key}`;
}

和theme.service.ts

import { Injectable } from "@angular/core";

import { StyleManagerService } from "./style-manager.service";

@Injectable()
export class ThemeService {
  constructor(
    private styleManager: StyleManagerService
  ) {}


  setTheme(themeToSet: string) {
    this.styleManager.setStyle(
      "theme",
      `${themeToSet}.css`
    );
  }
}

我注入并在构造函数private readonly themeService: ThemeService中运行。app.component.tsthis.themeService.setTheme('windy-car');

和结果.. 我确实看到了所选主题的自定义颜色，但是角材料功能被破坏了。color=primary不起作用，并且其他与角度材料相关的样式不显示。

例如，在我拥有的工具栏中color="primary"，颜色仍然是白色。

我确定它与错误有关，Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming但我不知道如何解决这个问题。

有任何想法吗 ？

** 更新 1 **

当我在中添加以下内容时styles.scss：

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

@include mat-core();

我仍然得到错误

Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming

角度材料组件正常工作，但它完全忽略了我选择的颜色。

4

1 回答 1

0

我终于能够解决它:)

所以在我添加的主style.scss文件中：

@use '~@angular/material' as mat;
@import '~@angular/material/theming';
@include mat.core();

我还添加了一个默认主题，我用我的文件覆盖了它，只是为了没有错误“找不到角度材料核心主题”

$a-primary: mat.define-palette(mat.$indigo-palette);
$a-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

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

// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$a-theme: mat.define-light-theme((
  color: (
    primary: $a-primary,
    accent: $a-accent,
    warn: $a-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 mat.all-component-themes($a-theme);
  • 更新 - 我实际上删除了它。我在一瞬间看到了我定义的这个主题，然后它变成了我的懒加载主题。如果我愿意，我可以只改变这个主题来写，这样开关就不会那么糟糕了。但我完全删除了它，除了有这个警告之外，它不会以任何方式影响我的应用程序。

在我的个人主题样式文件中，我只需要@use '../../node_modules/@angular/material/index' as mat;

现在在通用 scss 中，我没有直接指向我的组件，而是创建了一个类并将该类名添加到组件中。

例如：

代替：

app-toolbar {
  mat-toolbar {
    background: $toolbar-bg-color;
  }
}

原来我有很多::ng-deep，但我把它们都删除了，因为我想修改的所有组件都有panelClass属性，而我的组件..我只是给了它们一个类名。

所以我只是做了：

.app-toolbar-mat-toolbar {
    background: $toolbar-bg-color;
  }
于 2021-09-01T19:43:25.340 回答