Angular2はコンポーネント外の親スタイルを変更します

Question

現在のコンポーネントのスコープ外のコンポーネントのスタイルを変更したいと思います。次のように私のapp.component.htmlでマークアップは次のとおりです。

私はAからロードされた「ホーム・コンポーネント」からアプリ-NAVコンポーネントでクラスmain-navのスタイルを変更していますよルート。私はrouterLinkをnavで使用していますが、home.component.tsにencapsulation: ViewEncapsulation.Noneを追加すると見つかりましたが、app-navコンポーネントのクラスのスタイルを変更することはできますが、変更は一度しか適用されず、私の現在のコンポーネントの範囲外

Answer 1

変更コンポーネントのスタイルを - routerLink年代、私は変更を元に戻すことはできませんが（見えてくる/コンポーネントが初期化されたときに、CSSのみ/ロード回適用されるように思えます）

私が他の何かを言う前に、これは非常にお勧めです。コンポーネントはの自己完結型エンティティであり、プロジェクト全体または他のプロジェクトでも再利用できます。 CSSを介してのみシステム内の他のものを変更するコンポーネントを作成することで、コードから直ちに見るのが難しいタイトなカップリングが作成され、デバッグが困難なバグやその他のエラーが発生します。

あなたapp-nav変更したい場合は（あなたが後でそれを参照として、またはmain-navを、私はこれは私のミスであるかどうかわからないんだけど）現在のルートに基づいて、あなたはActivatedRouteを注入し、それを照会することによって、そうする必要があります必要なヘッダーの特定のバージョンを特定します。

もう1つの方法として、ルータのアウトレットの下にあるヘッダーを移動するだけで、ページ全体にあるコンポーネントからいつでもアクセスすることができます。

変更は一度のみ適用され、私はrouterLinkの

を使用して他のルートに行けばスタイルは、あなたが実際のコンポーネント、の必要はありませんを訪問したときにのみDOMに注入されているので、これは、期待されています彼らはそれが必要となる前に現れます。 Angularでは、コンポーネントに対して定義したスタイルが、そのコンポーネントののみを使用すると想定しています。あなたはこの経験則を破ります。

あなたの観察が正しいか -

私は変更を元に戻すことはできませんが（見えてくる/コンポーネントが初期化されたときに、CSSのみ/ロード回適用されるように思えます）。

Answer 2

特別なセレクタは、カプセル化の範囲を変更することなく、カプセル化外でcssにアクセスして適用するように設計されています。あなたの場合、私は考えます：ホストまたは：ホストコンテキストが役立ちます。 （ コンポーネントのテンプレート内の要素を標的とは対照的に）コンポーネントをホスト要素 のスタイルを標的とするホスト擬似クラスセレクター：

はhttps://angular.io/guide/component-styles#special-selectors

使用を参照してください。

と

時にはそれは、コンポーネントのビューの 外のいくつかの条件に基づいてスタイルを適用すると便利です。たとえば、CSSテーマクラス をドキュメント要素に適用し、それに基づいて コンポーネントの外観を変更したいとします。

：host（）の関数形式のように機能するhost-context（）擬似クラスセレクタを使用します。 ：host-context（）セレクタは、コンポーネントホスト要素の任意の祖先の CSSクラスを、 ドキュメントルートまで探します。 ：host-context（）セレクタは、別のセレクタと を組み合わせたときに便利です。