【Angular6+】属性及款式绑定

2023年11月12日 211次阅读 来源: 云中的猫

Angular6_属性及款式绑定

Angular 经由过程 [] 来绑定数值、变量或许表达式，这类绑定是
单向数据绑定。

属性绑定

属性绑定分为两种

  • Property
    元素的通例属性，比方 src、disabled 等

    <img [src]="heroImageUrl" />
<button [disabled]="isUnchanged">Cancel is disabled</button>
<div [ngClass]="classes">[ngClass] binding to the classes property</div>
<app-hero-detail [hero]="currentHero"></app-hero-detail>

  • Attribute

    元素的非通例属性，比方 colspan 等

    <tr>
  <td [attr.colspan]="1 + 1">One-Two</td>
</tr>

CSS 类绑定

借助 CSS 类绑定，能够从元素的 class attribute 上增加和移除 CSS 类名。

<!-- 这是一个或许全有或许全无的替换型绑定。
即当 badCurly 有值时 class 这个 attribute 设置的内容会被完整掩盖 -->
<div class="bad curly special" [class]="badCurly">Bad curly</div>
<!-- toggle the "special" class on/off with a property -->
<div [class.special]="isSpecial">The class binding is special</div>

款式绑定

款式绑定的语法与属性绑定相似。 但方括号中的部份不是元素的属性名，而由 style 前缀，一个点 (.)和 CSS 款式的属性名构成。 形如：[style.style-property]。

<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
<button [style.background-color]="canSave ? 'cyan': 'grey'">Save</button>
<button [style.font-size.em]="isSpecial ? 3 : 1">Big</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50">Small</button>
    原文作者：云中的猫
    原文地址: https://segmentfault.com/a/1190000017719621
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞