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

DDD
リリース: 2024-10-30 22:20:03
オリジナル
566 人が閲覧しました

How can I style child components from the parent in Angular using ::ng-deep?

親からの子コンポーネントのスタイリング: 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!