::ng-deep を使用して、Angular で親から子コンポーネントのスタイルを設定するにはどうすればよいですか?

親からの子コンポーネントのスタイリング: Angular での ::ng-deep の利用

はじめに
Angular 4 では、開発者は、親コンポーネントから子コンポーネントの CSS プロパティを変更する必要がある状況に直面する可能性があります。これには、Shadow DOM の境界を通過して、目的のスタイルをターゲットにするメソッドが必要です。 ::ng-deep セレクターは、この課題に対する解決策を提供します。

::ng-deep の使用法
::ng-deep は、アクセスを許可するシャドウピアシングセレクターです。親コンポーネントから子コンポーネントのスタイルに変換します。これは、非推奨の /deep/ コンビネータの現在推奨されている代替手段であり、>>> と同じエイリアスを共有します。 ::ng-deep を利用すると、親コンポーネントに適用されたスタイルがカスケードダウンして子コンポーネントに影響を与えることができます。

例
::ng-deep の使用法を説明するには、次のコードを考えてみましょう:

<code class="html"><div class="overview tab-pane" id="overview" role="tabpanel" [innerHTML]="project?.getContent('DETAILS')"></div></code>

<code class="css">.overview {
    ::ng-deep {
        p {
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}</code>

この例では、::ng-deep を使用して .overview クラスに適用されたスタイルは、.overview の子コンポーネント内の p 要素に適用されます。クラス。 &:last-child 疑似クラスは、その子コンポーネントの最後の p 要素に影響を与え、デフォルトの下マージンを削除します。

IE11 サポート
次の点に注意することが重要です:: ng-deep は IE11 ではサポートされていません。 ::ng-deep をサポートしていないブラウザの場合は、Angular CLI プロジェクトの ViewEncapsulation.None や encapsulation: "none" などの代替メソッドを検討して、同様の機能を実現できます。

以上が::ng-deep を使用して、Angular で親から子コンポーネントのスタイルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。