Web前端►框架►Angular

Angular中的Class与Style绑定

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/11/28/Angular%E4%B8%AD%E7%9A%84Class%E4%B8%8EStyle%E7%BB%91%E5%AE%9A/

摘要

本文主要讲述了：

  1. class
  2. style

正文

class

内联 class

当表达式的值为true时，将对应的 class 添加到 HTML 元素的className

示例：

输入：

my-angular/src/app/app.component.html

1
<div class="foo" [class.bar]="true" [class.foobar]="true">foo</div>

输出：

1
2
3
<app-root>
  <div class="foo bar foobar">foo</div>
</app-root>

ngClass指令

ngClass指令可以一次添加多个 class

对象语法

  • 当属性值为true时，把对应的属性名添加到 HTML 元素的className
  • 当属性值为false时，把对应的属性名从 HTML 元素的className中移除

示例：

输入：

my-angular/src/app/app.component.html

1
<div class="foo" [ngClass]="{ bar: true, foobar: false }">foo</div>

输出：

1
2
3
<app-root>
  <div class="foo bar">foo</div>
</app-root>

数组语法

将字符串数组中的所有元素添加到 HTML 元素的className

示例：

输入：

my-angular/src/app/app.component.html

1
<div class="foo" [ngClass]="['bar', 'foobar']">foo</div>

输出：

1
2
3
<app-root>
  <div class="foo bar foobar">foo</div>
</app-root>

style

内联 style

示例：

输入：

my-angular/src/app/app.component.html

1
2
3
<div style="font-weight: bold" [style.color]="'#f00'" [style.fontSize]="'64px'">
  foo
</div>

输出：

1
2
3
<app-root>
  <div style="font-weight: bold; color: #f00; font-size: 64px;">foo</div>
</app-root>

示例：将样式单位前置

输入：

my-angular/src/app/app.component.html

1
<div style="font-weight: bold" [style.fontSize.px]="64">foo</div>

输出：

1
2
3
<app-root>
  <div style="font-weight: bold; font-size: 64px;">foo</div>
</app-root>

ngStyle指令

ngStyle指令可以一次添加多个 style

对象语法

示例：

输入：

my-angular/src/app/app.component.html

1
2
3
<div style="font-weight: bold" [ngStyle]="{ color: '#f00', fontSize: '64px' }">
  foo
</div>

输出：

1
2
3
<app-root>
  <div style="font-weight: bold; color: #f00; font-size: 64px;">foo</div>
</app-root>

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/11/28/Angular%E4%B8%AD%E7%9A%84Class%E4%B8%8EStyle%E7%BB%91%E5%AE%9A/

本文对你有帮助？请支持我

支付宝
微信