将 ViewEncapsulation.None 设置为每个组件答案

【问题标题】：Set ViewEncapsulation.None to every component将 ViewEncapsulation.None 设置为每个组件
【发布时间】：2018-11-22 02:46:12
【问题描述】：

我不喜欢 Angular 如何在 HTML 页面的元素中添加 _ngcontent-*，由于我没有真正实现该功能，因此我删除了它，在我的组件中添加了 encapsulation: ViewEncapsulation.None。但是由于组件很多，而且我的项目中还会有更多组件，所以我想知道是否有一种方法可以全局设置封装而不是修改每个组件。

这是我所做的一些研究的link 和关于ViewEncapsulation 枚举的angular documentation。

【问题讨论】：

标签： angular typescript

【解决方案1】：

ViewEncapsulation 不仅允许从其他组件绑定您的内容 - 它还将停止封装您的组件 styles 因此，如果您从组件装饰器中删除 style 或 styleUrls ，则封装将设置为none 编译器

查看此doc 以获取更多查询

下一步您可以在使用 Angular cli 创建组件时对其进行限制

ng generate component [name] --view-encapsulation=none

这将创建您的组件，其封装属性为 none - 您可以通过 here 检查某些命令

希望这会有所帮助 - 编码愉快:)

【讨论】：

【解决方案2】：

您可以尝试在 app.component.ts 中设置“ViewEncapsulation.None”，这将适用于您的整个项目。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.None
})

【讨论】：