自学教程在 Angular 中，模板是HTML 编写用户界面 (UI) ，可以在模板中使用特殊语法来构建 Angular 的许多特性。
关于本指南中的语法和代码段的信息，请参阅Template syntax / 下载范例。
几乎所有 HTML 语法都是有效的模板语法。但是，由于 Angular 模板只是 UI 的一个片段，因此它不包含 <html>、<body> 或<base> 等元素。
为了消除脚本注入攻击的风险，Angular 不支持模板中使用 <script> 元素。Angular 会忽略 <script> 标记，并向浏览器控制台输出一条警告。
应用程序中的每个 Angular 模板都是一块 HTML，你可以将其包含在浏览器显示的页面中。Angular 中的 HTML 模板与常规 HTML 一样，可以在浏览器中渲染视图或用户界面，但功能要多得多。
使用 Angular CLI 生成 Angular 应用时，app.component.html 文件是一个包含占位符 HTML 的默认模板。
文本插值
插值是指将表达式嵌入到被标记的文本中。默认情况下，插值使用双花括号 {{ 和 }} 作为定界符。为了说明插值的工作原理，请考虑一个包含 currentCustomer 变量的 Angular 组件：
currentCustomer = 'Maria';可以用插值在相应的组件模板中显示此变量的值：
<h3>Current customer: {{ currentCustomer }}</h3>Angular 会用相应组件属性的字符串值替换掉 currentCustomer。在这里，它的值是 Maria。
在以下示例中，Angular 会求出 title 和 itemImageUrl 属性的值，以显示一些标题文本和图像。
<p>{{title}}</p>
<div><img alt="item" src="{{itemImageUrl}}"></div>模板语句
模板语句是可在 HTML 中用于响应用户事件的方法或属性。使用模板语句，你的应用可以通过诸如显示动态内容或提交表单之类的动作吸引用户。
在以下示例中，模板语句 deleteHero() 出现在 = 号右侧的引号中，(event)="statement"。
src/app/app.component.html:
<button type="button" (click)="deleteHero()">Delete hero</button>当用户单击 Delete hero 按钮时，Angular 就会调用组件类中 deleteHero() 方法。
可以将模板语句与元素、组件或指令一起使用以响应事件。
语法
与模板表达式一样，模板语句使用类似于 JavaScript 的语言。但是，模板语句的解析器与模板表达式的解析器有所不同。此外，模板语句解析器特别支持基本赋值 = 和带有分号 ; 的串联表达式。
不允许使用以下 JavaScript 和模板表达式语法：
new- 递增和递减运算符
++和-- - 赋值运算符，比如
+=和-= - 按位运算符，比如
|和& - 管道操作符
语句的上下文
语句具有上下文 - 也就是语句所属应用中的特定部分。
语句只能引用语句上下文中的内容，通常是组件实例。比如，(click)="deleteHero()" 中的 deleteHero() 就是下面代码段中的组件方法之一。
src/app/app.component.html:
<button type="button" (click)="deleteHero()">Delete hero</button>语句上下文还可以引用模板自身的上下文属性。在下面的示例中，组件的事件处理方法 onSave() 将模板自己的 $event 对象用作参数。在接下来的两行中，deleteHero() 方法接收了模板输入变量 hero 作为参数，而 onSubmit() 接收了模板引用变量 #heroForm 作为参数。
<button type="button" (click)="onSave($event)">Save</button>
<button type="button" *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{hero.name}}</button>
<form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>在这个例子中，$event 对象、hero 和 #heroForm 的上下文都是其模板。
模板上下文中的名称优先于组件上下文中的名称。前面 deleteHero(hero) 中的 hero 是模板输入变量，而不是组件的 hero 属性。
分享笔记