模板由两部分组成,一部分是标准的 HTML 标签,另一部分是 Angular 的模板语法。
模板语法可以分为三种类型:数据绑定,指令和管道。
这些模板语法会根据业务逻辑,数据状态来渲染 HTML。
组件类中的属性、方法和模板之间建立的一种带有方向性的映射关系,就叫做数据绑定。
数据绑定可以划分为以下四种:
将组件类中的属性(字符串为主)绑定到模板,就叫做文本插值。
例子:
// html <p> {{ currentYear }} </p> // ts currentYear = new Date().getFullYear();
*一般来说,双花括号里通常是变量或者表达式,Angular 会首先对这个变量或者表达式进行求值,然后将结果转换为字符串展示出来。
同样的,属性绑定也是将组件类中的属性绑定到模板上。比如下面的例子,文本插值和属性绑定可以达到相同的效果。
例子:
// html <section> <p title="{{ currentYear }}">文本插值</p> <p [title]="currentYear">属性绑定</p> </section> // ts currentYear = new Date().getFullYear();
*把要绑定的属性放在方括号 [ ] 内,Angular 就会将等号右侧的内容当作变量或表达式进行求值,否则,只会当作字符串处理。
在自定义标签中使用属性绑定,可以实现父组件向子组件传递数据的功能。
例子:
<talent-child *ngIf="param" [param]="param"></talent-child>
与前两种数据绑定方向相反,事件绑定是在模板中监听用户的行为,比如鼠标点击等,然后将这些行为和信息传递回组件类中,并做出相应的处理。
例子:
// html <button (click)="onSave()">Save</button> // ts onSave(){ console.log('click'); }
在自定义标签中使用事件绑定(自定义事件),可以实现子组件向父组件传递数据的功能。
例子:
<talent-child (closeDrawer)="closeDrawer()"></talent-child>
*父组件和子组件之间的数据传递,不但涉及到属性绑定和事件绑定,还会使用到 @Input() 和 @Output()两个装饰器,在此就不再进行详细讲解,可以关注后续手记。
双向绑定是属性绑定和事件绑定的结合,用户的输入会自动更新到组件类中对应的属性上,而组件类中对应属性的变化也会立即反映到模板上。
例子:
// 模块文件需要引入: // import { FormsModule } from "@angular/forms"; // html <section> <input [(ngModel)]="text"> <p>{{ text }}</p> </section> // ts text = 'hello';
end