<!-- 父组件 father.html -->
<div class="father">
<dwb-child></dwb-child>
</div>
<div class="other">
<dwb-child></dwb-child>
</div>
<!-- 子组件 child.html -->
<h2>我是子组件H2</h2>
<h3>我是子组件H3</h3>
一、 在子组件中,根据父组件来改变自身的样式:
// 子组件样式 child.component.scss
:host-context(.father) h2 {
background: red;
}
:host-context(.other) h2 {
background: orange;
}
结果:
二、在父组件中,来修改子组件的样式
// 父组件样式 father.component.scss
::ng-deep dwb-child {
h2 {
color: beige;
}
h3 {
color: blue;
}
}
结果: