web-dev-qa-db-ja.com

DOM属性_ngcontent- *と_nghost- *によって引き起こされるAngular2スタイリングの問題

Scssとcliに問題があります：angularは属性_nghost-fyw-1を実行中にappsタグ（コンポーネント）に追加します。同時にcssに属性セレクターを追加します。 _ngcontent-fyw-1と呼ばれ、もちろん動作しません。

この振る舞いをどのように変更/回避できるか考えていますか？

PS：通常のcssにも適用されます。

私のコンポーネントの.scssファイルは次のようになります。

my-comp {
  h1 {
    background-color: red;
  }
}
cssangularsass
17
wzr1337

まあ、

自分で答えを見つけました。デフォルト設定を使用する場合、コンポーネントCSSでラッピングmy-comp要素セレクターを提供する必要はありません。

代わりに、*要素セレクターを使用して、my-compにネストされているすべての要素に影響を与えます。それ以外の場合、angularはmy-compセレクターを追加要素として扱い、DOMには存在しない_ng-content-*属性を追加します。

もう1つのオプションは、コンポーネントのViewEncapsulationを無効にすることです-コンポーネントmy-compにのみ影響することに注意してください

import {Component, ViewEncapsulation} from 'angular2/core'

@Component({
  selector: 'my-comp',
  encapsulation: ViewEncapsulation.None,
  ...
});

https://egghead.io/lessons/angular-2-controlling-how-styles-are-shared-with-view-encapsulation は、3つの異なる設定モードを完全に説明しています。

43
wzr1337

update

::ng-deep ちょっと前から。
以下のコメントも参照してください。

オリジナル

スタイルを追加する場所や、セレクターでターゲットにする要素の詳細はあまり提供しませんでした。

スタイルを要素の境界を越えたい場合の「公式」な方法は、>>>好き

:Host >>> h1 {
  background-color: red;
}
  • :Hostは現在の要素をターゲットにします。
  • >>>（または/deep/）Angular ignore _nghost-xxx属性は、コンポーネントスタイルのカプセル化エミュレーションに使用されます。

D3.jsのコンポーネントのスタイルがangular 2 に表示されない

17
Günter Zöchbauer