Angular2全局设置视图封装答案

【问题标题】：Angular2 setting view encapsulation globallyAngular2全局设置视图封装
【发布时间】：2020-07-09 17:43:33
【问题描述】：

我决定为我项目中的所有组件将ViewEncapsulation 设置为None。

那么，如何将ViewEncapsulation.None 全局设置为整个项目？而不是在我的每个组件装饰器中设置它。

注意：仅供参考，我的部门在 RC.6 上

编辑：Günter Zöchbauer 提供的第二个解决方案也适用于 2.1.2

【问题讨论】：

标签： angular

【解决方案1】：

您可以通过传递自定义CompilerConfig 来设置默认视图封装。此功能是在RC.2 中添加的（功能列表中的最后一项）

1.您可以在 NgModule 级别设置它

这种方式已经行不通了

    @NgModule({
        // imports, declaration, bootstrap, etc..
        providers: [{
            provide: CompilerConfig, 
            useValue: new CompilerConfig({
                defaultEncapsulation: ViewEncapsulation.None
            })
        }]
    })
    export class AppModule {}

Plunker example

2。将其设置为引导级别（感谢 yurzui）

platformBrowserDynamic().bootstrapModule(AppModule, [
    {
        defaultEncapsulation: ViewEncapsulation.None
    }
]);

请注意，您需要从@angular/core 导入ViewEncapsulation

3。在最近的 Angular 版本中，这可以在编译器选项中设置

注意：我自己还没有尝试过。这就是我解释文档的方式：

在tsconfig.json

{ 
  ...,
  angularCompilerOptions: {
   defaultEncapsulation: 3;
  }
}

【讨论】：

platformBrowserDynamic().bootstrapModule(AppModule, { defaultEncapsulation: ViewEncapsulation.None });
我没试过。我希望，如果他们明确设置，将使用此设置，但在他们留下默认设置（未指定 - 目前可能几乎总是如此）的地方，将应用新的默认设置。
这不适用于 AOT 编译，仅适用于 JIT。现在我必须使用--aot=false 进行生产构建。
答案已经过时了。据我所知，此设置已移至 NgModule，并且组件设置覆盖了模块设置。无法覆盖组件设置，因为如果覆盖它，组件代码（HTML、CSS）可能会中断。
所有解决方案似乎都不再有效，知道如何在 Angular 10 中全局设置吗？