时间戳

首页 > 解决方案 > Angular2：每个延迟加载的子模块中的自定义材质主题

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

问题描述

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

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

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

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

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

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

主页-app.component.scss：

@import './theme.scss';

VS。

角.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中指定的导入主题

标签： angularangular-material2

解决方案

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

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

推荐阅读