属性绑定 ( [属性名] )
当要把视图元素的属性 (property) 设置为模版表达式时，就要写模板的属性 (property) 绑定。最常用的属性绑定是把元素属性设置为组件属性的值
<img [src]="heroImageUrl">属性绑定可以认为是数据的单向绑定，因为组件的数据属性流动到目标的元素的属性。绑定的属性不能读与写，只能进行设置。
如果这个元素触发了事件，可以通过事件绑定来监听它们。
如果必须读取目标元素上的属性或调用它的某个方法，就需要使用ViewChild和ContentChild。
一次性的将字符串初始化
当满足下列条件时，应该省略括号：
-
目标属性接受字符串值。
-
字符串是个固定值，可以直接合并到模块中。
-
这个初始值永不改变。
在标准 HTML 中用这种方式初始化 attribute，这种方式也可以用在初始化指令和组件的属性。 例如：
<app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>这个prefix属性可以接受字符串的值，并且这个值是一个固定的值，不会再改变，所以在这个，可以直接省去 "[ ]" ，直接去设置属性。
对于属性是字符串的时候，在设置属性时，可以用属性绑定，也可以使用插值表达式。
<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p>
<p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p>那这两个哪一个更好呢？
在多数情况下，插值表达式是更方便的备选项。 实际上，在渲染视图之前，Angular 把这些插值表达式翻译成相应的属性绑定。
当要渲染的数据类型是字符串时，没有技术上的理由证明哪种形式更好。 如果倾向于可读性，在选择上可以倾向于插值表达式。
建议建立一种代码风格规则，选择一种形式， 这样，既遵循了规则，又能让手头的任务做起来更自然。
注意：数据类型不是字符串时，就必须使用属性绑定了。
安全问题：
在Angular中，Angular 数据绑定对危险 HTML 有防备。 在显示它们之前，它对内容先进行过滤一边。 不管是插值表达式还是属性绑定，都不会允许带有 script 标签的 HTML 泄漏到浏览器中。
attribute、class 和 style 绑定
attribute 绑定
可以通过attribute 绑定来直接设置 attribute 的值，当元素没有属性可绑的时候，就必须使用 attribute 绑定。
<td [attr.colspan]="1 + 1">One-Two</td>attribute 绑定的语法与属性绑定类似。 但方括号中的部分不是元素的属性名，而是由attr前缀，一个点 (.) 和 attribute 的名字组成。
可以通过值为字符串的表达式来设置 attribute 的值。
CSS 类绑定
借助 CSS 类绑定，可以从元素的 class attribute 上添加和移除 CSS 类名。
CSS 类绑定绑定的语法与属性绑定类似。 但方括号中的部分不是元素的属性名，而是由class前缀，一个点 (.)和 CSS 类的名字组成， 其中后两部分是可选的。形如：[class.class-name]。
1.根据一定的条件给特定的元素指定不同的class名称：
HTML文件如下：
<span class="example" [class]="isWho">我是谁？</span>CSS文件中：
.example {
color: blue;
font-size: 16px;
}
.me {
color: red;
font-size: 20px;
}
.your {
color: yellow;
font-size: 30px;
}
在类文件中,有一个属性：isWho；
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
// title = 'demoShowData';
// showDataList = ['showData1', 'showData2'];
isWho = 'me';
constructor() {
}
ngOnInit() {
}
}
在组件初始化时，声明了isWho这个变量，但是没有初始化，即：isWho这个变量为undefined，此时，浏览器的class属性为undefined，这个时候，class='example' 这个样式完全就被 [class] 覆盖。
若想使用example中的样式有两种方式：
a. 删除[class]='isWho'
b. 在类文件中使变量isWho='example';
有时候，也会有，在某些情况下使用 'me' 这个中的样式，在某些情况下，使用 ‘your ’ 这个样式。这个时候，只需要按照一定的条件逻辑，将需要的样式名称变量赋值给isWho这个变量即可；
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
// title = 'demoShowData';
// showDataList = ['showData1', 'showData2'];
isWho = null;
constructor() {
}
ngOnInit() {
if ('条件逻辑') {
this.isWho = 'me';
} else {
this.isWho = 'your';
}
}
}
2.绑定特定的类名，根据条件添加
有时候，对于一个元素，只有在特定的有添加一个样式，其他情况不添加。
HTML文件（模版文件）
<span [class.example]="isWho">我是谁？</span>TS文件（类文件）
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
// title = 'demoShowData';
// showDataList = ['showData1', 'showData2'];
isWho = null;
constructor() {
}
ngOnInit() {
if ('条件逻辑') {
this.isWho = true;
} else {
this.isWho = false;
}
}
}
根据判断的逻辑，当isWho为true时，会给span这个元素增加'example' 这个class ，反之没有。
样式绑定
通过样式绑定，可以设置内联样式。
样式绑定的语法与属性绑定类似。 但方括号中的部分不是元素的属性名，而由style前缀，一个点 (.)和 CSS 样式的属性名组成。 形如：[style.style-property]。
<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>第一个button 根据绑定的isSpecial的值为true或者false去设置button的颜色为red或者green。
第二个button 根据绑定的canSave的值为true或者false去设置button的背景颜色为cyan或者grey。
有些样式绑定中的样式带有单位。在这里，以根据条件用 “em” 和 “%” 来设置字体大小的单位。
<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>第一个button的单位是em，根据绑定的isSpecial的值为true或者false去设置button的字体大小为3em或者1em。
第一个button的单位是%，根据绑定的isSpecial的值为true或者false去设置button的字体大小为3%或者1%。
但是在Angular中还有ngClass 和ngStyle这两个指令，可以更好的进行上面的操作，后续会说到。