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;
}

https://serious-lose.notion.site/NG-Style-798c99f25074457494d1df2341598515