2016-07-07 6 views
3

ViewEncapsulation.Emulated,ViewEncapsulation.Native ad ViewEncapsulation.Noneの違いを説明しているan answered questionが既にあります。角2のネイティブビューのカプセル化

シャドーDOMとViewEncapsulation.NativeをネイティブにサポートするChromiumバージョンにバンドルされていることが保証されている電子アプリケーションがあるとします。エミュレーションのオーバーヘッドを避けるために、このケースはどのようにネイティブカプセル化の恩恵を受けますか?

Angular 2アプリケーションのビューのデバッグには、ViewEncapsulation.Emulatedのためにヘルパー属性と名前空間のCSSクラスが非常に混乱している可能性があります。

encapsulationを指定しないすべてのコンポーネントに対して、デフォルトのカプセル化をグローバルにViewEncapsulation.Nativeに変更できますか。

ViewEncapsulation.Nativeの他の実用的な機器は何ですか?

答えて

3

https://github.com/angular/angular/pull/7883によれば、これは、私はまだかかわらず、それを自分自身を試していない

import {CompilerConfig} from '@angular/compiler'; 

bootstrap(AppComponent, [{ 
    provide: CompilerConfig, 
    useValue: new CompilerConfig({defaultEncapsulation: ViewEncapsulation.Native}) 
}]) 

動作するはずです。

ViewEncapsulation.Nativeは、Chromeを対象とする場合に最も効果的です。他のブラウザがシャドーDOMサポートをリリースするまでにはまだかなりの時間がかかるようです。

主な利点は、Angular2は各コンポーネント要素に属性を追加する必要はなく、すべてのコンポーネントスタイルを<head>に追加する必要がないことです。

オフラインテンプレートコンパイラを使用すると、パフォーマンスはほとんどの場合、Emulatedで問題になることはほとんどありません。

+1

構文上の誤りがありましたが、そうでなければ動作しています。ありがとうございました。 – estus

+0

修正していただきありがとうございます:)とフィードバック。 –

関連する問題