Question

我正在创建一个Angular Element以用于其他项目。该元素是一个在其模板中包含Angular Material组件的组件，因此最终，我的元素要求该页面一个Material主题CSS文件（以及Material图标和Material字体文件，并且tf.get_variable标签只能显示在文档的link中。

很高兴地说，仅需要调用<head>并在页面上写platformBrowser().bootstrapModuleFactory(...)，就无需进一步说明。有可能吗？

可以要求我的自定义元素的用户链接其页面<some-custom-element>中的所有这些CSS文件吗？我想采用这种模式，以后添加新的依赖项将不是向后兼容的更改，我必须告诉所有人添加新的CSS文件或创建新的自定义元素。

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

Answer 2

我可以通过简单地将字体家族导入src/styles.scss来使用Mat图标。

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

角度元素：对材料的依赖

2 个答案: