Angular 2アプリでコンポーネント間で共有されるスタイル

Question

Angular 2アプリには、さまざまなコンポーネントで共通のCSSルールがいくつかあります。明らかに私は&を各コンポーネントのスタイルに貼り付けたいとは思わない。

1. 一般的なCSSルールを静的CSSファイルに置き、index.htmlのheadセクションにリンクを使用して追加します。
2. 共通のCSSルールを1つ以上のファイルに置き、それぞれのコンポーネントのデコレータに@Componentデコレータを含めます。 styleUrls: [ './myComponentStyle.css', '../common/common.css']

第一のアプローチは、私には、それほどの角度ではないっぽいに見えるが、同じで、それが動作することを確認し、実装が簡単です。

2番目は、各コンポーネントでいくつかの作業を行う必要がありますが、どちらのスタイルが使用されているかをより詳細に制御できます。また、私の共通のスタイルをより小さなスタイルシートに編成し、必要なもののみを使用することもできます。

あなたはこれらのソリューションのいずれかを優先しますか、それとも3番目の優れたソリューションがありますか？ :)

Answer 1

angle2アプリ（link）にスタイリングを使用する方法は3つあります。 スタイルの再利用を可能にするものの2つを挙げました。

私の個人的な意見は、大規模なアプリケーションの場合、主に＃2のビューカプセル化が角度で提供されていることが望ましいということです。

＃1は、アプリケーションのすべての部分に共通の非常に一般的なスタイルに使用できます。しかし、あなたのSPAのルートがとにかく角度成分になることを考慮に入れるならば、＃2よりもスタイルを結びつける別のアプローチを行う必要は本当にありません。例えば一息-インラインNG2-テンプレートのようなツールをあなたのアプリをバンドルして使用した場合

さらに2つの異なる方法でCSSを扱うことにより、あなたはこれを覚えておく必要があります（といくつかの余分なコードを扱う）

Answer 2

このソリューションは優れていますが、すべてのコンポーネントで使用可能な一般的なスタイルに適しています。たとえば、CSSグリッドのスタイル。

`@Component({ 
    selector: 'my-app', 
    template: ` `, 
    styleUrls: ["shared.style.css"], 
    encapsulation: ViewEncapsulation.None 
}) export class App {}` 

Demo could be found here (plunker)

注：この方法によって含まスタイル、（単にスタイルのタグを追加する、または非カプセル化）が影響しますあなたは誰にも負けないあなたのアプリコンポーネントにカプセル化を設定することができ、それがよりangularishようにするに あなたのページのすべての要素。時には私たちが本当に望んでいることがあります（穴プロジェクトのためのcssフレームワークを使用することで合意しました）。しかし、単にいくつかのコンポーネントの間でスタイルを共有したい場合は、おそらく最善の方法ではありません。

Summary: 
(+) easy to use 
(-) no encapsulation 

2.、それは非常に理解し、予測可能な動作を持っているので、私は、このソリューションが好きです。 しかし、それには1つの問題があります：

これは、使用するたびに共有スタイルでスタイルタグを追加します。 大きなスタイルのファイル、またはそれを使用している多くの要素があると問題になる可能性があります。

@Component({ 
    selector: 'first', 
    template: `<h2> <ng-content> </ng-content> </h2>`, 
    styleUrls: ["shared.style.css"] 
}) 
export class FirstComponent {} 

Demo could be found here (plunker)

Summary: 
(+) easy to use 
(+) encapsulation 
(-) duplicates styles for every usage 

3.あなたが使用できる1つの以上のオプションがあります。 子供用の共有スタイルを提供するコンポーネントをもう1つ作成するだけです。また

:host /deep/ h2 { 
    color: red; 
} 

私が使用することを忘れないように言及される価値がある：あなたが子コンポーネントのスタイルを利用できるように、あなたのスタイルに/深い/使用する必要がありますそれらの場合

` <styles-container> 
    <first> first comp </first> 
    </styles-container> 
    <styles-container> 
    <second> second comp </second> 
    </styles-container>` 

ホストが作りますスタイルは利用可能子要素のためののみ。これを省略すると、もう1つのグローバルスタイルが得られます。

Demo could be found here (plunker)

Summary: 
(-) you have to create container and it in templates 
(+) encapsulation 
(+) no duplicated styles 

---

注：スタイルのカプセル化は本当にクールな機能です。しかし、深いスタイルを制限する方法がないことを覚えておく必要があります。だから深いスタイルを適用する場合、それはすべての子供に絶対に利用可能なので、それも注意して使用してください。