网站首页 » 前端开发 » Angular 2+ » Angular 2+ 模板语法必备套路
上一篇:
下一篇:

Angular 2+ 模板语法必备套路

模板中的HTML

几乎所有的HTML语法都是有效的模板语法。<script> 被禁止(被忽略),<html>、<body>和<base>元素用在模板中是没有意义的。

插值表达式 ( {{…}} )

把计算后的字符串插入到 HTML 元素标签内的文本或对标签的属性进行赋值,可以调用宿主组件的方法,也可以作简单的数值运算,并把求值的结果转换成字符串。

<div>
  <h3>{{title}}</h3> // 标签赋值
  <img [src]="{{imageUrl}}"> // 属性赋值
  <p>{{ 1+1 }}</p>  // 运算
  <p>{{ sumFn() }}</p> // 调用方法
</div>

模板表达式

执行一个表达式后赋值给绑定目标的属性 [targetProperty]=”expression”。

表达式的上下文可以包括组件之外的对象。 比如模板输入变量 (let hero)和模板引用变量(#heroInput)就是备选的上下文对象之一。

<div *ngFor="let hero of heroes">{{hero.name}}</div>
<input #heroInput> {{heroInput.value}}

表达式中的上下文变量是由模板变量、指令的上下文变量(如果有)和组件的成员叠加而成的。 如果我们要引用的变量名存在于一个以上的命名空间中,那么,模板变量是最优先的,其次是指令的上下文变量,最后是组件的成员。

模板语句

模板语句用来响应由绑定目标(如 HTML 元素、组件或指令)触发的事件。(event)=”statement”。
语句上下文可以引用模板自身上下文中的属性。 在下面的例子中,就把模板的 $event 对象、模板输入变量(let hero)和模板引用变量(#heroForm)传给了组件中的一个事件处理器方法。

<button (click)="onSave($event)">Save</button>
<button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{hero.name}}</button>
<form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>

下面是模板表达式和模板语句都需要注意的地方,它们不支持:

  • 赋值 (=, +=, -=, …)
  • new运算符
  • 使用;或,的链式表达式
  • 自增或自减操作符 (++和–)
  • 不支持位运算|和&

模板上下文中的变量名的优先级高于组件上下文中的变量名。模板语句不能引用全局命名空间的任何东西。比如不能引用window 或 document,也不能调用console.log或Math.max。

接下来,把模板表达式和模板语句用到实战中。

绑定语法

数据绑定的目标是 DOM 中的某些东西。 这个目标可能是(元素 | 组件 | 指令的)property、(元素 | 组件 | 指令的)事件,或(极少数情况下) attribute 名。绑定的类型可以根据数据流的方向分成三类: 从数据源到视图、从视图到数据源以及双向的从视图到数据源再到视图。

单向:从数据源到视图目标

从数据源到视图目标(插值表达式可用于 Property | Attribute | 类 | 样式)

<img [src]="heroImageUrl"> // 元素的 property
<app-hero-detail [hero]="currentHero"></app-hero-detail>  // 组件的 property
<div [ngClass]="{'special': isSpecial}"></div>  // 指令的 property
<button [attr.aria-label]="help">help</button>  // attribute(例外情况)
<tr><td [attr.colspan]="1 + 1">One-Two</td></tr>  // attribute(例外情况)
<div [class.special]="isSpecial">Special</div>  // class property
<button [style.color]="isSpecial ? 'red' : 'green'">  // style property

单向:从视图目标到数据源(事件)

<button (click)="onSave()">Save</button>
<input [value]="currentHero.name" (input)="currentHero.name=$event.target.value" >

使用 EventEmitter 实现自定义事件。通常,指令使用 Angular EventEmitter 来触发自定义事件。 指令创建一个EventEmitter实例,并且把它作为属性暴露出来。 指令调用EventEmitter.emit(payload)来触发事件,可以传入任何东西作为消息载荷。 父指令通过绑定到这个属性来监听事件,并通过$event对象来访问载荷。

双向绑定(多用于表单控件,如:input)

在使用ngModel指令进行双向数据绑定之前,我们必须导入FormsModule并把它添加到Angular模块的imports列表中。

注意:

方括号告诉 Angular 要计算模板表达式。 如果忘了加方括号,Angular 会把这个表达式当做字符串常量看待,并用该字符串来初始化目标属性。 它不会计算这个字符串。

但也有例外当满足下列条件时,应该省略括号:

  • 目标属性接受字符串值。
  • 字符串是个固定值,可以直接合并到模块中
  • 这个初始值永不改变
<app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>

常用的指令

内置指令

  • NgClass – 添加或移除一组CSS类
  • NgStyle – 添加或移除一组CSS样式
  • NgModel – 双向绑定到HTML表单元素

内置结构型指令

  • NgIf – 根据条件把一个元素添加到DOM中或从DOM移除
  • NgSwitch – a set of directives that switch among alternative views
  • NgSwitch – 一组指令,用于切换一组视图
  • NgForOf – 对列表中的每个条目重复套用同一个模板

*ngFor 中为了提高渲染性能,一般都需要加一个 trackBy 来确保已存在的 DOM 重复渲染。

// 用 hero.id 来作为标识,因为 hero.id 就 唯一的。
<div *ngFor="let hero of heroes; trackBy: hero.id">
  ({{hero.id}}) {{hero.name}}
</div>

模板引用变量 ( #var )

模板引用变量通常用来引用模板中的某个DOM元素,它还可以引用Angular组件或指令或Web Component。这个很方便好用。下面是个例子:

<input #phone placeholder="phone number">

<!-- lots of other elements -->
<!-- phone refers to the input element; pass its `value` to an event handler -->
<button (click)="callPhone(phone.value)">Call</button>

这样就不需要在 component.ts 里声明变量了,直接在.html 中声明就可以立即使用,模板引用变量的作用范围是整个模板。

模板表达式操作符

模板表达式语言使用了 JavaScript 语法的子集,并补充了几个用于特定场景的特殊操作符。

管道操作符 ( | )

例如,可能希望把数字显示成金额、强制文本变成大写,或者过滤列表以及进行排序。

<div>Title through uppercase pipe: {{title | uppercase}}</div>

安全导航操作符 ( ?. ) 和空属性路径

Angular 的安全导航操作符 (?.) 是一种流畅而便利的方式,用来保护出现在属性路径中 null 和 undefined 值。 当 currentHero 为空时,保护视图渲染器,让它免于失败。

The current hero's name is {{currentHero?.name}}

非空断言操作符(!)

在 Angular 编译器把你的模板转换成 TypeScript 代码时,这个操作符会防止 TypeScript 报告 “hero.name可能为null或undefined”的错误。
与安全导航操作符不同的是,非空断言操作符不会防止出现null或undefined。 它只是告诉 TypeScript 的类型检查器对特定的属性表达式,不做 “严格空值检测”。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/angular-core-knowledge-template-syntax/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END