:: ng-deepをどこでどのように使用しますか？

私はAngular4を初めて使用するので::ng-deep、Angular4で使用する方法と場所を誰かに説明してもらえますか？

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

通常、 /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;
            }
        }
    }
}

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

使用法

::ng-deep、>>>および/deep/特定のCSSルールのビューカプセル化を無効にします。つまり、コンポーネントのHTMLにないDOM要素にアクセスできます。たとえば、Angular Material（またはこのような他のサードパーティライブラリ）を使用している場合、生成された要素の一部はコンポーネントの領域外にあり（ダイアログなど）、それらの要素に直接アクセスしたり、通常のCSSを使用したりすることはできません。仕方。これらの要素のスタイルを変更する場合は、次の3つのいずれかを使用できます。

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

今のところ、Angularチームは、EMULATEDビューのカプセル化でのみ「深い」操作を行うことを推奨しています。

廃止

「深い」の操作は、実際にされている非推奨あまりにも、しかし角度は前処理をサポートしていので、それは今のために働いて静止画（断るために急いではありません::ng-deep、今日見とる非推奨慣行を最初に）。

とにかく、この方法に従う前に、ビューのカプセル化アプローチを無効にすることを検討することをお勧めします（これも理想的ではなく、スタイルが他のコンポーネントに漏れる可能性があります）が、場合によっては、より良い方法です。ビューのカプセル化を無効にすることにした場合は、特定のクラスを使用してCSSルールの交差を回避し、最後にスタイルシートの混乱を回避することを強くお勧めします。コンポーネントの.tsファイルで直接無効にするのは本当に簡単です。

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

ビューのカプセル化の詳細については、この記事を参照してください。

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

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

コンポーネントcss：

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

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

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

結果の（Angularで生成された）css：

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

編集：

:host新しいcssクラスを作成する代わりに、キーワードを使用して同じ動作を実現できます。

:host ::ng-deep .mat-checkbox-layout

角度ガイドの: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これを行うことができます。

 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見つかった場合はcssがh1に適用されます。これは、::ng-deep多くの場合必要であるものの、多少アンチパターンであることに依存しすぎることに対する優れた代替手段です。

この場合、&はh1（sass / scssの動作方法）に置き換えられるため、「通常」とテーマ/代替のcssを互いに隣接して定義できます。これは非常に便利です。

の正しい数を取得するように注意してください:。以下のために::ng-deep2とのためにそこにいる:host-contextだけで。

ただの更新：

非推奨のように見える::ng-deep代わりに使用する必要があります/deep/。

ドキュメントごと：

シャドウピアスの子孫コンビネータは非推奨になり、主要なブラウザとツールからサポートが削除されます。そのため、Angularでのサポートを終了する予定です（/ deep /、>>>、:: ng-deepの3つすべて）。それまでは、ツールとの互換性を高めるために:: ng-deepを使用することをお勧めします。

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

:: ng-deepは注意して使用してください。アプリ全体でこれを使用して、マテリアルデザインツールバーの色をアプリ全体で異なる色に設定しましたが、アプリがテスト中にツールバーの色が互いにステップしていることがわかりました。これらのスタイルがグローバルになるためです。この記事を参照してください。これ は、他のコンポーネントにブリードしない実用的なコードソリューションです。

<mat-toolbar #subbar>
...
</mat-toolbar>

export class BypartSubBarComponent implements AfterViewInit {
  @ViewChild('subbar', { static: false }) subbar: MatToolbar;
  constructor(
    private renderer: Renderer2) { }
  ngAfterViewInit() {
    this.renderer.setStyle(
      this.subbar._elementRef.nativeElement, 'backgroundColor', 'red');
  }

}