Angular Style

:host /deep/ //  当前组件和其子组件内部样式生效

/deep/ 组合器还有两个别名：>>> 和 ::ng-deep。

encapsulation可选值为 Emulate(默认) | Native | None(可进可出) | ShadowDom

@Component({
     
  selector: 'fx-button',
  // 指定组件的样式封装性
  encapsulation: ViewEncapsulation.None,
  templateUrl: './fx-button.component.html',
  styleUrls: ['./fx-button.component.scss']
})

一、[style.propetyName]
1.基本用法

<p [style.fontSize]='fSize'></p> 
<p [style.width.px]='width200'></p> //带单位

fSize: string='14px’; 
width200: string='200';

2.绑定函数

<p [style.height]="setHeight(list.length)"></p>

setHeight(length) {
     
  if(length==1){
     
      return '4rem';
  }
  else if(length==2){
     
      return '6rem';
  }
  else{
     
      return '10rem';
  }
}

总结：优先级最高，会覆盖已有的样式属性。

二、[ngStyle]
1.基本用法

 <p [ngStyle]="eleStyle"></p>

 eleStyle: any={
      
   fontSize:'14px’; 
   color:'#333’; 
 }

2.对象型写法

<p [ngStyle]="{'background': '#ff0'}"></p>

3.对象判断写法

<p [ngStyle]="{'background': userName=='xjy'?'red':'green'}"></p>

三、[class.className]
1.基本用法

<p [class.changeColor]="flag"></p>

flag: boolean=true

changeColor: {
      color:'#fff'; }

四、[ngClass]
1.基本用法

// string - 会把列在字符串中的 CSS 类（空格分隔）添加进来

<p [ngClass]="'first second'"></p> 

<p [ngClass]="stringExp|arrayExp|objExp"></p>

// Array - 会把数组中的各个元素作为 CSS 类添加进来

<p [ngClass]="['first', 'second']"></p>

// Object - 每个 key 都是要处理的 CSS 类，当表达式求值为真的时候则添加，为假则移除。

.title{
      color: '#333'; }

<p [ngClass]="{'title':true}"></p> //第一个参数是类名，第二个参数是boolean值

<p [ngClass]="{‘title class1 class2':true}"></p> //第一个参数是类名，第二个参数是boolean值

2.判断

<p [ngClass]="{'bgColor': userName=='xjy' }"></p>

.bgColor{
      background: '#f00'; }

3.函数用法

<p [ngClass]="getIco(menuCode)"></p>

getIco(menuCode){
     
   let className="";
   switch (menuCode)
   {
     
     case 'index':
       className= "index";
       break;
     case 'view':
       className= "view";
       break;
     case 'operation':
       className= "operation";
       break;
    };
   return className;
}