属性绑定 ( [属性名] )
当要把视图元素的属性 (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这两个指令,可以更好的进行上面的操作,后续会说到。