angular 模版变量、模板表达式、模板语句

• 模型-视图-控制器（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>

表达式

插值表达式

说明

插值表达式：在视图模板中，{{ }}及{{ }}中的内容。

• {{ }}中的内容，称为模版表达式
• {{ }}中的内容一般是组建类的属性或方法
• Angular 对{{ }}中的内容，先求值，再转成字符串

使用

• 插入HTML标签内

<p> {{ name }} </p>

• 为HTML标签属性赋值

<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）