Angular2：每个延迟加载子模块中的自定义材质主题

Question

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

我有角度包装模块（app 模块）和许多独立的延迟加载子模块。每个子模块就像一个完全独立的应用程序，需要自己的角度材质主题。

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

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

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

这个或任何更好的解决方案有任何已知问题吗？

home-app.component.scss：

@import './theme.scss';

对比。

angular.json

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

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

实际： 如果我不将"src/app/orgs/home/theme.scss" 添加到angular.json，styles.scss 中声明的自定义主题将应用于home-app.component.html 中使用的一些材料组件, 部分材质组件会使用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
})