親コンポーネントがあります:
<parent></parent>
そして、このグループに子コンポーネントを追加したいと思います。
<parent>
<child></child>
<child></child>
<child></child>
</parent>
親テンプレート:
<div class="parent">
<!-- Children goes here -->
<ng-content></ng-content>
</div>
子テンプレート:
<div class="child">Test</div>
parentと は2 つの別個のコンポーネントであるためchild、それぞれのスタイルは独自のスコープ内にロックされます。
親コンポーネントで次の操作を試しました:
.parent .child {
// Styles for child
}
しかし、.childスタイルはコンポーネントに適用されませんchild。
スコープの問題を解決するために、のスタイルシートをコンポーネントにstyleUrls含めるためにを使用しようとしました。parentchild
// child.component.ts
styleUrls: [
'./parent.component.css',
'./child.component.css',
]
childしかし、それは役に立ちませんでした。また、スタイルシートを取得するという他の方法も試しましたがparent、それでも役に立ちませんでした。
では、親コンポーネントに含まれる子コンポーネントのスタイルはどのように設定すればよいのでしょうか?
ベストアンサー1
アップデート - 最新の方法
避けられるのであれば、これを実行しないでください。Devon Sans がコメントで指摘しているように、この機能はおそらく廃止されるでしょう。
最後の更新
Angular 4.3.0から現在（Angular 12.x）まで、すべてのピアスCSSコンビネータは非推奨でした。Angularチームは::ng-deep以下に示すように新しいコンビネータを導入しました。
デモ ：https://plnkr.co/edit/RBJIszu14o4svHLQt563?p=preview
styles: [
`
:host { color: red; }
:host ::ng-deep parent {
color:blue;
}
:host ::ng-deep child{
color:orange;
}
:host ::ng-deep child.class1 {
color:yellow;
}
:host ::ng-deep child.class2{
color:pink;
}
`
],
template: `
Angular2 //red
<parent> //blue
<child></child> //orange
<child class="class1"></child> //yellow
<child class="class2"></child> //pink
</parent>
`
昔ながらの方法
およびencapsulation mode/またはpiercing CSS combinators >>>, /deep/ and ::shadow
動作例:http://plnkr.co/edit/1RBDGQ?p=preview
styles: [
`
:host { color: red; }
:host >>> parent {
color:blue;
}
:host >>> child{
color:orange;
}
:host >>> child.class1 {
color:yellow;
}
:host >>> child.class2{
color:pink;
}
`
],
template: `
Angular2 //red
<parent> //blue
<child></child> //orange
<child class="class1"></child> //yellow
<child class="class2"></child> //pink
</parent>
`