没有可见的副作用：模板表达式只作为数据的展示，不应该改变任何的数据；应该构建出幂等的表达式，除非依赖的值发生变化，否则多次调用时，应该返回相同的数据信息
4.1.2.2、模板绑定语法通过数据绑定机制，将数据源与视图进行绑定，从而实现源数据与用户呈现的一致性
从数据源到视图：插值、组件中的属性、dom 元素的 property 、css 样式、css 类
从视图到数据源：事件
视图与数据源之间的双向绑定：数据对象
分类 语法单向
从数据源到视图 1、插值表达式：{{expression}}
2、使用 [] 进行绑定：<a [href]='expression'></a>
3、使用 bind 进行绑定：<a bind-href='expression'></a>
单向
从视图到数据源 1、使用 () 进行绑定：<a (click)='statement'></a>
2、使用 on 进行绑定：<a on-click='statement'></a>
双向
视图到数据源；数据源到视图 1、使用 [()] 进行绑定：<input type="text" [(ngModel)]="product.Name">
2、使用 bindon 进行绑定：<input type="text" bindon-ngModel="product.Name">
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-product-list', templateUrl: './product-list.component.html', styleUrls: ['./product-list.component.scss'] }) export class ProductListComponent implements OnInit { public title = '我是 title 属性值'; public styleProperty = '<b>我是包含 html 标签的属性</b>'; public fontColor = 'red'; public url = 'https://yuiter.com'; public name: string; constructor() { } ngOnInit(): void { } getUser() { alert('111111111'); } } <h3>2.1、从数据源到视图</h3> <p> <a href='http://www.likecs.com/{{url}}'>使用插值表达式进行绑定</a> </p> <p> <a [href]='url' [style.color]='fontColor'>使用 [] 进行绑定</a> </p> <p> <a bind-href='url'>使用 bind 进行绑定</a> </p> <p> <span [innerHtml]="styleProperty"></span> </p> <h3>2.2、从视图到数据源</h3> <p> <button (click)="getUser()">使用 () 进行绑定</button> </p> <p> <button on-click="getUser()">使用 on 进行绑定</button> </p> <h3>2.3、数据双向绑定 --- 需要在 AppModule 中添加对于 FormsModule 的引用</h3> <p> <input type="text" [(ngModel)]="name"> </p> <p> <input type="text" bindon-ngModel="name"> </p>
单向数据绑定
<p>{{title}}</p>
双向数据绑定
<input type="text" [(ngModel)]="name"> <!-- 当没有 NgModel 时，双向数据绑定等同于下面的写法 --> <input type="text" [value]="name" (input)="name=$event.target.value"> 4.1.4、属性、样式绑定
dom 元素的 property 绑定
<img [src]="productImageUrl"> <img bind-src="productImageUrl">
html 标签的 attribute 绑定
attribute 绑定的语法类似于 property 绑定，由前缀 attr、点（ . ）和 attribute 名称组成
attribute 绑定的主要用例之一是设置 ARIA attribute（给残障人士提供便利）
<button [attr.aria-label]="actionName">{{actionName}} with Aria</button>
style 内联样式绑定
// 1、[style.width]="width" ：string | undefined | null public width = "100px"; //2、[style.width.px]="width"：number | undefined | null public width = "20"; // 3、[style]="styleExpr"：string public styleExpr = "width: 100px; color:red"; // 4、[style]="styleExpr"：{key:value} public styleExpr = {width: '100px', height: '100px'}; // 5、[style]="styleExpr"：array public styleExpr = ["width", "100px"];
class 属性绑定
// 1、[class.foo]="hasFoo"：bool | undefined | null public hasFoo = true; // 2、[class]="classExpr"：string public classExpr = "my-class1 my-class2"; // 3、[class]="classExpr"：{key:value} public classExpr= {my-class1: true, my-class2: true}; // 4、[class]="classExpr"：array public classExpr= ["my-class1", "my-class2"]; 4.1.5、事件绑定在事件绑定中，可以通过 $event 参数获取到 dom 事件对象的属性从而获取到模板信息
<input type="text" (keyup)="getMsg($event)"> <p>输入的值：{{msg}}</p> import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-product-list', templateUrl: './product-list.component.html', styleUrls: ['./product-list.component.scss'] }) export class ProductListComponent implements OnInit { public msg: string; constructor() { } ngOnInit(): void { } getMsg(event: KeyboardEvent) { console.log(event); this.msg = (event.target as HTMLInputElement).value; } }