web-dev-qa-db-ja.com

:: ng-deepを使用する方法と場所

私はAngular 4が初めてなので、Angular 4で::ng-deepを使用する方法と場所を説明してください。

実際、子コンポーネントのCSSプロパティの一部を親コンポーネントから上書きしたいです。さらに、IE11でサポートされていますか？

cssangularangular-template
34
Jeyabalan Thavamani

通常、/deep/ “shadow-piercing”コンビネータを使用して、スタイルをchild componentsに強制できます。このセレクタにはエイリアス>>>があり、現在は:: ng-deepという別のセレクタがあります。

/deep/ combinatorは廃止されているため、::ng-deepを使用することをお勧めします

例：

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

およびcss

.overview {
    ::ng-deep {
        p {
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

子コンポーネントに適用されます

43
Sajeetharan - MSFT

::ng-deep、>>>、および/deep/は、コンポーネントのHTMLにないDOM要素へのアクセスを提供します。たとえば、Angular Materialを使用している場合、一部の要素はコンポーネントの領域外のAngular Materialによって生成されます（ dialogなど） ）そして、通常のCSSの方法を使用してこれらの要素にアクセスすることはできません。これらの要素のスタイルを変更する場合は、次の3つの要素のいずれかを使用する必要があります。

::ng-deep .mat-dialog {
  /* styles here */
}

現時点では、>>>と/deep/は廃止されているため、::ng-deepを使用することをお勧めします。

更新

「深い」操作も実際には非推奨です。この方法に従う前に、CSSカプセル化アプローチの無効化（これも理想的ではありません）を見て、どちらの方法があなたの場合に適しているかを判断することをお勧めします。カプセル化を無効にすることを決めた場合、本当に簡単に実現できます。

@Component({
  selector: '',
  template: '',
  styles: [''],
  encapsulation: ViewEncapsulation.None  // Use to disable CSS Encapsulation for this component
})

詳しくは this の記事をご覧ください。

33
Commercial Suicide

angularガイドの:Host-contextのすぐ上にある::ng-deepの説明を見逃さないようにしてください。 https://angular.io/guide/component-styles 。免責事項：今まで見逃していたので、もっと早く見たいと思いました。

::ng-deepは、コンポーネントを記述せず、そのソースにアクセスできない場合に必要になることがよくありますが、:Host-contextは非常に便利なオプションです。

たとえば、設計したコンポーネント内に黒の<h1>ヘッダーがあり、暗いテーマの背景に表示されるときに白に変更する機能が必要です。

ソースにアクセスできなかった場合、親のcssでこれを実行する必要があります。

.theme-dark widget-box ::ng-deep h1 { color: white; }

しかし、代わりに:Host-contextを使用すると、コンポーネント内でこれを行うことができますinside。

 h1 
 {
     color: black;       // default color

     :Host-context(.theme-dark) &
     {
         color: white;   // color for dark-theme
     }

     // OR set an attribute 'outside' with [attr.theme]="'dark'"

     :Host-context([theme='dark']) &
     {
         color: white;   // color for dark-theme
     }
 }

これは、コンポーネントチェーン内の.theme-darkを探し、見つかった場合はhsにcssを適用します。これは::ng-deepに頼りすぎる代わりに良い代替手段です。

この場合、&がh1（sass/scssの動作）に置き換えられるため、「通常」とテーマ/代替CSSを隣り合わせに定義でき、非常に便利です。

:の正しい数を取得するよう注意してください。 ::ng-deepには2つあり、:Host-contextには1つだけです。

13
Simon_Weaver

親をカプセル化されたcssクラスにする必要があるため、::ng-deepをコンポーネントの子のみに制限することの重要性を強調します。

これが機能するためには、コンポーネントのロード時に同じ名前を持つすべてのクラスに適用される前ではなく、親の後に::ng-deepを使用することが重要です。

コンポーネントcss：

.my-component ::ng-deep .mat-checkbox-layout {
    background-color: aqua;
}

コンポーネントテンプレート：

<h1 class="my-component">
    <mat-checkbox ....></mat-checkbox>
</h1>

結果のCSS：

.my-component[_ngcontent-c1] .mat-checkbox-layout {
    background-color: aqua;
}
3
Vedran

ただの更新：

非推奨と思われる::ng-deepの代わりに/deep/を使用する必要があります。

ドキュメントごと：

シャドウピアスの子孫コンビネータは廃止され、主要なブラウザとツールからサポートが削除されます。そのため、Angular（/ deep /、>>>、および:: ng-deepの3つすべて）のサポートを削除する予定です。それまでは、ツールとの幅広い互換性のために:: ng-deepを優先する必要があります。

あなたはそれを見つけることができます こちら

1
Balázs Takács