Angular 笔记 CSS 样式篇

今天就只是个笔记，单纯记录写法如何使用，以便自己日後查找。
毕竟人非圣贤、会忘难免 XD

css

套用 className

变数为 isDark，value 必需为 boolean

isDark = true;

在 html 的 dom 里设定

<p [ngClass]="isDark ? dark : light">test</p>

<p [ngClass]="{'isDark': true}">test</p>

https://angular.tw/api/common/NgClass

Document difference between [NgClass] and [class] [NgClass] 与 [class] 之间的差异

style

在 html 的 dom 里设定

<p
  [ngStyle]="{'background-color': '#159', 'color':'#fff', 'font-size': '20px'}"
>
  test
</p>

isDark = true;

<p [ngStyle]="isDark ? {'background-color': '#159', 'color':'#fff'} : {}">
  test
</p>

若 属性的值为 value

width = 60;
height = 20;

<p [ngStyle]="{'width.px': width, 'height.px': height}>test</p>

https://angular.tw/api/common/NgStyle

:host 设定宿主(host)的样式

:host {
  display: block;
  border: 1px solid black;
}

在 css 里加上条件式

:host(.active) {
  border-width: 3px;
}

@HostBinding

在 ts 里直接绑定 class 到 宿主上

@HostBinding() class = `hey`;

直接绑定 id 到 宿主上

@HostBinding() id = `hey`;

或是直接设定 style

@HostBinding() style = `background: #159;display: block;`;

套上变数

@Input() isColor!: string;

@HostBinding('style.background') get color() {
  return this.isColor;
}

@HostBinding('class.value') get color() {
  return true;
}

若是 return true，class 会挂载 value 这个 class name

@HostBinding('class') get color() {
  return 'yoo';
}

若 HostBinding 里的 只有 class，则需 return 出一个字串，return 出来的字串则为 class name