角度2つのCSSモジュール

Question

私はこれが正常に動作します

@Component({ 
    selector: 'about', 
    template: './about.hmtl', 
    styles: ['.block {background-color: red} ...'] // <-- This will generate css modules 
}) 

使用を試みたが、角度は属性セレクタですべてのクラスを拡張し、すべてのDOM要素に一意の属性を与えます。しかし、多くのCSSモジュールが必要になると、アプリケーションは高速に読み込まれます（たとえば、20コンポーネントと100コンポーネントのCSSコードがすべてのコンポーネントに対応します）。

Answer 1

コンポーネントcssに関しては、重複を避けるために重複していて、維持するのに苦労します。スタイルを設定してスタイルを定義するすべての子コンポーネントを含む最上位のコンポーネントまたは親コンポーネントを見つけることをお勧めします。外部ファイルを使用するか、インラインで定義します。次に、コンポーネントデコレータ内でプロパティをViewEncapsulation.Noneに設定します。これは、すべての子コンポーネントが親コンポーネントのスタイルを継承することを意味し、全部ではなく1ビットのCSSを維持できます。