Angular 修改子组件的样式

 <!--   父组件 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 ;
  } 
} 

结果：

 

查看更多关于Angular 修改子组件的样式的详细内容...