Angular2：ルータによって動的に挿入されたスタイリングコンポーネント

Question

この問題を解消するために、特に直近の回答はありませんでした。特に、リリースされた2.xバージョンのAngularに関しては苦労しました。

を使用すると、次のコードでapp.component.htmlがあるとします。

<div> 
    <router-outlet></router-outlet> 
</div> 

ルータが動的にカスタムコンポーネントを挿入し、my-componentと（不思議なことを）言うので、のようなrouter-outlet要素の兄弟としてそのコンポーネントを配置します

<div> 
    <router-outlet></router-outlet> 
    <my-component></my-component> 
</div> 

明らかに、ルータは別のコンポーネントをそこに置くことができます。したがって、ファイルにスタイルを作成するときには、名前に頼ってmy-componentにすることはできません。

だから...どうすればいいですか？

これはなぜ重要ですか？my-component CSSの:hostにスタイルを設定するだけではどうですか？まあ、すべてのスタイルがそこに属しているわけではないから。たとえば、app.componentがフレックスコンテナ（つまり、display: flex;）であると判断した場合、my-component要素はフレックスアイテム（つまり、flex: 1 0 0;）のスタイルにする必要があります。 my-componentの中にフレックスアイテムスタイルを配置することは、親コンポーネントのスタイルと組み合わせているため、悪い習慣のように思えます。

あなたが答えを知っているならばチャイム。

ありがとうございます！

Answer 1

私は試していないが、私は隣接兄弟セレクタは、キーが/deep/キーワードです

:host div + * { 
    display: flex; 
} 

Answer 2

ことをあなたができるようにする必要がありますね：スタイルは何に適用されます

要素の後にrouter-outletが続きます。

それとも特定の既知のコンポーネントに別のスタイルを適用するために作ります。

:host /deep/ router-outlet + my-component { 
    display: block; 
    border: 10px solid black; 
} 

:host /deep/ router-outlet + my-component2 { 
    display: block; 
    border: 10px solid red; 
}