web-dev-qa-db-ja.com

ng-contentをスタイルする方法

トランスクルージョンに関するこのチュートリアルに従っています https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

ただし、ng-contentを置き換える要素をスタイルする方法については言及されていません。

ネストされたコンポーネントをターゲットにするときに通常使用される/deep/キーワードが先行する場合、css内のこれらの要素のみをターゲットにできるようです。これは正しいです？

angularangular-template
20
user1275105

update

::slottedはすべての新しいブラウザでサポートされるようになり、 `ViewEncapsulation.ShadowDomで使用できます

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

オリジナル

::content xxx { ... }は同様に機能するか、:Host xxx { ... }。シミングはそれほど厳密でも正確でもありません。私の知る限り （>>>/deep/ old）::ng-deep（SASSでサポート）とスペースは現在同じです。

12
Günter Zöchbauer

<ng-content>内のコンテンツは、コンポーネントから隔離されています。コンポーネントの属性やスタイルを見ることができません。

スタイルを設定する必要があり、場合によってはスタイルを設定する必要がある場合は、2つのオプションがあります。

1. CSSを書く

通常のCSSファイルを作成し、そのようなコンテンツのスタイルを設定できます。ほとんど確実に、シャドウDOMポリフィルを使用しています。通常のCSSは、ポリフィルを透過して、要素のスタイルを設定します。アプリのサイドバーがあるとします。あなたは書くことができます：

app-sidebar p {
  color:red;
}

Ng-cliを使用している場合、style.scssに記述したルールはすべてグローバルになります。

2.：Host/deep /セレクターを使用します

シャドウDOMポリフィルを使用し、styleデコレータのstyleUrlsまたはComponent属性を使用してコンポーネントのスタイルを設定する場合は、:Hostを持つ要素を選択してから、 /deep/子セレクターを持つシャドウDOMポリフィルを無視します。

  • :Hostは要素を選択します。
  • /deep/は、ネストされたセレクターにモックシャドウDOM属性セレクターを追加せずに要素を選択します。

それらをまとめると、宣言されている場所に関係なく、Hostコンポーネント要素内にネストされているすべての要素を選択できます。

そのようです：

:Host /deep/ p {
  color:red;
}
25
superluminary

これで問題が解決しました

::ng-deep {
    & > * {
         // styles here
    }
}
5
Barbu Barbu