Angular Elements：对材质的依赖答案

【问题标题】：Angular Elements: dependency on MaterialAngular Elements：对材质的依赖
【发布时间】：2018-12-12 08:12:33
【问题描述】：

我正在创建一个Angular Element 以用于其他项目。该元素是一个在其模板中包含 Angular Material 组件的组件，所以最终我的元素要求页面一个 Material 主题 CSS 文件（以及 Material 图标和 Material 字体文件，并且 link 标签只能出现在文档的<head>)。

很高兴地说，只需调用platformBrowser().bootstrapModuleFactory(...) 并在页面上写<some-custom-element> 即可，无需进一步说明。这可能吗？

要求我的自定义元素的用户在他们页面的<head> 中链接所有这些 CSS 文件是否可以接受？我想在这种模式下，以后添加新的依赖项不会是向后兼容的更改，我必须告诉每个人添加新的 CSS 文件或制作新的自定义元素。

【问题讨论】：

您是否找到了一种将 Angular Material 与 Angular Element 打包的方法？
我没有。我仍然要求用户自己包含一个材料主题。
我不知道您在其他项目中使用 Web 组件时是否遇到了 Angular 组件的问题。我遇到了很多问题，比如我必须调用 ChangeDetection 来让组件监听 mat-select 和 mat-table 的更改或样式问题。这么多麻烦。不确定你是否征服了他们。

标签： angular angular-material angular-elements

【解决方案1】：

您可能需要将组件的封装设置为 ViewEncapsulation.None。

@Component({
    selector: 'pay-button',
    templateUrl: './pay-button.component.html',
    styleUrls: ['./pay-button.component.scss'], //include material related css here
    encapsulation: ViewEncapsulation.Native
})

【讨论】：

这可能行得通，但如果他们的应用已经有了 Material 主题怎么办？
好点@AlexanderTaylor。通过将所有相关样式直接包含在组件特定的 scss 文件中，我能够通过原生视图封装应用所有材质样式（小吃栏、按钮、表单元素等）。更新了我的答案。
你有例子吗？对我来说，使用 Angular 和 Angular Material 版本 7.x 工作的主题有点挑战性。像日期选择器这样的组件根本没有样式。提前谢谢你

【解决方案2】：

我只需将字体系列导入src/styles.scss 即可使用Mat Icons。

@import "https://fonts.googleapis.com/icon?family=Material+Icons+Round";

【讨论】：