13

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

很高兴地说，所需要的只是在页面上调用platformBrowser().bootstrapModuleFactory(...)和写入<some-custom-element>，而无需进一步说明。那可能吗？

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

4

2 回答 2

2

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

@Component({
    selector: 'pay-button',
    templateUrl: './pay-button.component.html',
    styleUrls: ['./pay-button.component.scss'], //include material related css here
    encapsulation: ViewEncapsulation.Native
})
于 2018-09-08T22:30:32.847 回答
1

只需将字体系列导入src/styles.scss.

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

于 2019-03-29T08:12:01.427 回答