一、模板与数据绑定
1.数据显示
2.模板语法
（一） 表达式
① 插值表达式
在视图模板中，{{ }}及{{ }}中的内容。
使用
插入HTML标签内 <p> {{ name }} </p>
为HTML标签属性赋值 <img src="{{ imgUrl }}">
② 模板表达式
模板表达式产生一个值。可以进行一些简单计算{{ 1+1 }}
使用
{{ }}中的内容 ：{{ 1 + 1 }}
输入属性绑定的值 [property] = "expression"
③ 模板表达式操作符
1.管道操作符（|）
管道是一个简单的函数，它接受一个输入值，并返回转换结果。
管道操作符会把它左侧的表达式结果传给它右侧的管道函数。
2.安全导航操作符（?.）
安全导航操作符用来保护出现在属性路径中null和undefined值，保护视图渲染器，让它免于失败。
当person不存在时，下面代码将报错，组件视图将无法渲染。 {{person.name}}
安全导航操作符方式： {{person?.name}}
3.非空断言操作符（!）
非空断言操作符（!）用于告诉 TypeScript 的类型检查器对特定的属性表达式，不做 "严格空值检测"。
{{hero!.name}}
表达式上下文
表达式上下文 是模版中各种绑定值的来源。
（注）表达式上下文包括（优先级由高到低）：
模版输入变量
模版引用变量
指令的上下文变量
模版对应组建类的实例
（二） 语句
① 模板语句
模板语句用来响应由绑定目标（如 HTML 元素、组件或指令）触发的事件。
支持内容：赋值（=）使用; 或 ,的链式表达式
使用
事件绑定 (event)="statement"
（注）
语句上下文包括：模版的$event对象
模版输入变量
模版引用变量
模版对应组件类的实例
（三） 绑定语法
模板绑定是通过 property 和事件来工作的，
绑定类型：Property
目标 : 元素的 property 组件的 property 指令的 property
范例 ： <img [src]="heroImageUrl">
<app-hero-detail [hero]="currentHero"></app-hero-detail>
<div [ngClass]="{'special': isSpecial}"></div>
绑定类型：事件
目标 :元素的事件 组件的事件 指令的事件
范例 ： <button (click)="onSave()">Save</button>
<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
<div (myClick)="clicked=$event" clickable>click me</div>
绑定类型：双向
目标 : 事件与 property
范例 ： <input[(ngModel)]="name">
绑定类型：Attribute
目标 : attribute（例外情况）
范例 ： <button [attr.aria-label]="help">help</button>
绑定类型：CSS 类
目标 : class property
范例 ： <div [class.special]="isSpecial">Special</div>
绑定类型：样式
目标 :style property
范例 ： <button [style.color]="isSpecial ? 'red' : 'green'">
网友评论