web-dev-qa-db-ja.com

/ deep /の代替

Ng bootstrap paginationコンポーネントのスタイルを変更し、Angular 6アプリで/deep/リンクを使用します。次のコードは正常に動作しますが、コンソールは、コードが非推奨であるという警告を表示しています。

だから、警告を取り除くためにどのように変更する必要がありますか？

現在使用しているCSSコードは次のとおりです。

ngb-pagination /deep/ .page-item.disabled .page-link{
    background: none;
  }

 ngb-pagination /deep/ .page-item.active .page-link {
    background-color: #223C61;
    &:focus, &:visited{
      outline: none;
      box-shadow: none;
    }
  }
cssangularangular6ng-bootstrap
7
s4tr2

/deep/または::ng-deepを使用する代わりに、サードパーティのUI要素を使用するコンポーネントで View Encapsulation を無効にすることもできます。

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

そうすることは、次のことを意味します。

Angularは、グローバルスタイルにCSSを追加します。前述のスコープルール、分離、および保護は適用されません。これは基本的に、コンポーネントのスタイルをHTMLに貼り付けることと同じです。

ビューのカプセル化をオフにする場合は、アプリの異なるコンポーネントにある同じタイプの他の要素ではなく、本当に必要なhtml要素のみをターゲットにしてください（たとえば、カスタムclassまたはidを要素に）。

無効にしたときViewEncapsulationまた、CSSで!importantを使用して既存のサードパーティスタイルを上書きする必要がありましたが、 ::ng-deep。

8
fridoo

:: ng-deep、/ deep /、および>>>非推奨:: ng-deep疑似クラスセレクターには、いくつかのエイリアス>>>および/ deep /もあり、3つすべてがまもなく削除されます。

その主な理由は、コンポーネントの周りにスタイル分離サンドボックスを突き刺すためのこのメカニズムが、悪いスタイリング手法を潜在的に助長する可能性があることです。

状況はまだ進化していますが、現時点では、特定のユースケースで必要に応じて:: ng-deepを使用できます。

https://blog.angular-university.io/angular-Host-context/

代わりに:: ng-deepを代わりに使用してください

2
René Winkler