Angular2设置视图全局封装 [英] Angular2 setting view encapsulation globally

问题描述

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

I've decided to set ViewEncapsulation to None for all my components in my project.

那么，如何在整个项目中全局设置ViewEncapsulation.None?而不是在我的每个组件装饰器中进行设置.

So, how can I set ViewEncapsulation.None globally to whole project? instead of setting it in each of my components decorator.

注意:只是有关其他信息，我的部门在RC.6上.

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

Edit: The 2nd solution provided by Günter Zöchbauer also works on 2.1.2

推荐答案

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

You can set default view encapsulation by passing a custom CompilerConfig. This feature was added in RC.2 (last item in the features list)

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

这种方式不再有效

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

柱塞示例

2.将其设置为引导程序级别(感谢yurzui)

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

请注意，您通常需要从@angular/core

Please note that you ofc need to import ViewEncapsulation from @angular/core

3.在最新的Angular版本中，可以在编译器选项中设置

警告:我自己还没有尝试过. 这就是我解释文档的方式:

Caution: I haven't tried this myself yet. This is just how I interpreted the docs:

在tsconfig.json

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

• https://angular.io/guide/angular-compiler-options
• https://angular.io/api/core/CompilerOptions
• https://angular.io/api/core/ViewEncapsulation
• https://angular.io/guide/angular-compiler-options
• https://angular.io/api/core/CompilerOptions
• https://angular.io/api/core/ViewEncapsulation

这篇关于Angular2设置视图全局封装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！