- 模型-视图-控制器（MVC）
- 模型-视图-视图模型（MVVM）
- Angular 组件相当于 控制器 或 视图模型
- Angular 模版相当于 视图
变量
模版输入变量
<hero-detail *ngFor = "let hero of heroes"
[hero] = "hero">
</hero-detail>
-
let关键字创建了一个名叫hero的模板输入变量 -
ngFor指令每次迭代都从数组中把当前元素赋值给hero变量 - 可以在
ngFor的宿主元素（及其子元素）中引用模板输入变量hero
模版引用变量
- 模板引用变量通常用来引用 模板中的某个DOM元素
- 模板引用变量还可以用来引用Angular组件、指令 或 Web Component
- 可以在模板中的任何地方引用模板引用变量
<button #buttonDOM></button>
{{buttonDOM}}
<button ref-buttonDOM></button>
{{buttonDOM}}
[object HTMLButtonElement]
- 模板引用变量的值默认是设置模板引用变量的元素
- 模板引用变量的值也可以设置为其它内容的引用（比如表单中引用为
ngForm指令）
<form #myForm="ngForm"> </form>
表达式
插值表达式
说明
插值表达式：在视图模板中，{{ }}及{{ }}中的内容。
使用
- 插入HTML标签内
<p> {{ name }} </p>
<img src="{{ imgUrl }}">
模版表达式
说明
模板表达式产生一个值。
- 赋值（
=） - 操作并赋值（
+=、-=、...） - 自增、自减（
++、--） -
new运算符 - 使用
;或,的链式表达式 - 位运算（
|和&）
-
|、?.、和!
使用
-
{{ }}中的内容
{{ 1 + 1 }}
- 输入属性绑定的值
[property] = "expression"
表达式上下文
表达式上下文 是模版中各种绑定值的来源。
表达式上下文包括（优先级由高到低）：
- 模版输入变量
- 模版引用变量
- 指令的上下文变量
- 模版对应组建类的实例
注意：
- 模板表达式只能引用表达式上下文中的成员
- 模板表达式不能引用全局命名空间中的任何东西（比如：
window、document、console.log）
模板表达式操作符
管道操作符（|）
管道是一个简单的函数，它接受一个输入值，并返回转换结果。
- 管道操作符会把它左侧的表达式结果传给它右侧的管道函数。
安全导航操作符（?.）
- 安全导航操作符用来保护出现在属性路径中
null和undefined值，保护视图渲染器，让它免于失败。
当person不存在时，下面代码将报错，组件视图将无法渲染。
{{person.name}}
传统解决方法：
<ng-container *ngIf="person">
{{person.name}}
</ng-container>
{{person && person.name}}
安全导航操作符方式：
{{person?.name}}
非空断言操作符（!）
- 在 TypeScript 2.0 中，可以使用
--strictNullChecks标志强制开启严格空值检查。 - 在严格空值检查模式下，如果有未赋值的变量，或者试图把
null或undefined赋值给不允许为空的变量，类型检查器就会抛出一个错误。 - 在严格空值检查模式下，如果类型检查器在运行期间无法确定一个变量是否是
null或undefined，也会抛出一个错误。 - 非空断言操作符（
!）用于告诉 TypeScript 的类型检查器对特定的属性表达式，不做 "严格空值检测"。
<div *ngIf="hero">
{{hero!.name}}
</div>
语句
模版语句
说明
模板语句用来响应由绑定目标（如 HTML 元素、组件或指令）触发的事件。
- 操作并赋值（
+=、-=、...） - 自增、自减（
++、--） -
new运算符 - 位运算（
|和&） - 模版表达式运算符
- 赋值（
=） - 使用
;或,的链式表达式
使用
- 事件绑定
(event)="statement"
语句上下文
语句上下文包括：
- 模版的
$event对象 - 模版输入变量
- 模版引用变量
- 模版对应组件类的实例
注意：
- 模板语句只能引用语句上下文中的成员
- 模板语句不能引用全局命名空间中的任何东西（比如：
window、document、console.log）
