Angular 2 : Custom material theme in each lazy loaded submodule

Question

在 Angular 7 应用程序的单独子模块中加载自定义 Angular Material 2 主题的问题

我有 Angular 包装器模块(应用程序模块)和许多独立的延迟加载子模块。每个子模块的行为就像一个完全独立的应用程序，需要自己的 Angular Material 主题。

我为每个子模块创建了自定义主题，并尝试在每个组件的 .scss 文件中使用相对路径引用自定义主题。

一些 Material 组件应用自定义主题(按钮)，而一些(mat-form-field)只采用 style.scss 中指定的主题。

我可以避免这种情况的一种方法是将每个自定义主题包含在 angular.json 的“样式”数组中，但我担心，通过这样做，每个独立的子模块(应用程序)都必须加载每个主题的编译 .css这将是开销。

是否有任何已知问题或任何更好的解决方案？

主页-app.component.scss:

@import './theme.scss';

VS。

Angular .json

...
"styles": [
    "src/styles.scss",
    "src/app/orgs/home/theme.scss" // <-- FIXED BY ADDING THIS
],
...

预期:
在 home-app.component.scss 中声明的主题将被加载并应用于 home-app.component.html 中使用的每个 Material 组件

实际:
如果我不将“src/app/orgs/home/theme.scss”添加到angular.json中，styles.scss中声明的自定义主题将应用于home-app.component.html中使用的一些 Material 组件，并且一些 Material 组件将使用 home-app.component.scss 中指定的导入主题

Answer 1

您是否尝试将其直接添加到组件的样式数组中？

@Component({
  selector: 'app-home',
  template: 'your-template.html',
  styles: ['your-style.scss', 'your-theme.scss']
})

您可以做的另一件事是使用 ShadowDom 作为您的 ViewEncapsulation :

@Component({
  selector: 'app-home',
  template: 'your-template.html',
  styles: ['your-style.scss', 'your-theme.scss'],
  encapsulation: ViewEncapsulation.ShadowDom
})