【Angular6+】属性及样式绑定

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>