web-dev-qa-db-ja.com

:: ng-deepの代わりに使用するもの

ルーターアウトレットによってangularに配置された要素のスタイルを設定しようとしており、生成された要素の幅が100％になることを確認したい

ほとんどの返信から、::ng-deepセレクターを使用する必要があることがわかりましたが、Angularの docs から非推奨になりました。 ::ng-deepに代わるものはありますか？

htmlcssangular
46
Jacob Schwartz

FWIW私の研究では、ng-deepまたは他の適用可能な代替の代替物は見つかりませんでした。これは、Angularチームが、最初はdeepなどのセレクターを使用していたシャドウdomのW3C仕様に従っているためだと思います。ただし、W3cは推奨事項を削除しましたが、新しい推奨事項に置き換えていません。それが起こるまで、Angularチームは::ng-deepとその代替手段を利用できるが、W3Cのドラフトの保留状態のために非推奨の状態になると思います。今すぐこれをバックアップするドキュメントを見つけるのに時間をかけることができませんが、最近それを見ました。

長い話：代替品が作成されるまで::ng-deepとその代替物を使用し続けます-廃止は単なる通知であり、実際の変更が実現するたびに人々が盲目的にならないようにします。

-UPDATE-

https://drafts.c​​sswg.org/css-scoping-1/ 興味をお持ちの場合の提案案は次のとおりです。シャドウdomツリー内の要素のセレクターの堅牢なセットに取り組んでいるようです。一度承認された場合、angularクローンに通知するのはこの仕様です（つまり、angularがブラウザでライブになったら独自のセレクタを実装する必要はないかもしれません）。

56
dudewad

非推奨の::ng-deepをバイパスするには、通常ViewEncapsulationを無効にします。これは最良のアプローチではありませんが、私には役立っています。

ViewEncapsulationを無効にするには、コンポーネントで次の手順を実行します。

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  encapsulation: ViewEncapsulation.None
})

export class HeaderComponent {

}

これにより、このコンポーネントの.scssスタイルがアプリケーション全体にグローバルになります。スタイルが親コンポーネントおよび兄弟コンポーネントにチェーンを移動できないようにするには、次のようにセレクタでscss全体をラップします。

app-header {
  // your styles here and any child component styles can go here
}

ここで、ここで指定されたスタイルは子コンポーネントに移行するため、CSSセレクターをさらに特定し、CSSを追加するときにpとqに注意する必要があります（Angularアプリで指定された子セレクターを追加し、その後、そのスタイル）。

上記のパラグラフのため、これは最善のアプローチではないと言いますが、これは私に非常に役立ちました。

9
AliF50

深いスタイルの単純で簡単な代替は、親コンポーネントの要素セレクターを使用する一般的なスタイルです。 hero-details.component.cssにこれがある場合：

:Host ::ng-deep h3 {
  font-style: italic;
}

Styles.cssでは次のようになります。

app-hero-details h3 {
  font-style: italic;
}

基本的に、深いスタイルはカプセル化されていないスタイルなので、概念的にはコンポーネントスタイルというよりも一般的なスタイルのように見えます。個人的には、もう深いスタイルは使いません。重大な変更はメジャーバージョンの更新では正常であり、廃止予定の機能の削除は公正なゲームです。

3
J. Lenthe

これは:: ng-deepの一般的な置き換えではありませんが、質問の作成者が説明した使用例です。

ルーターアウトレットによって挿入された要素のスタイルを設定する特別な場合には、CSSの隣接する隣接セレクタを使用したエレガントなソリューションがあります。

router-outlet+* {
  /* styling here... */
}

これは、ルーターアウトレットの直接の隣接要素であるすべての要素に適用されます。

参考文献：
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
https://angular.io/guide/router#router-outlet

2
mrm1st3r