我们讨论了许多不同的角度模板语法概念，如Data binding或ngIf和ngFor内置指令。在这里，我们将借此机会总结语法的不同可能性，以便于参考。
<$>[注意]这篇文章介绍了<$>角度2+的模板语法
内联与独立文件模板
出于安全原因，模板可以包含几乎任何常规的HTML，但脚本标记除外。您可以在与组件类相同的文件中内联定义模板：
1[label app.component.ts]
2import { Component } from '@angular/core';
3
4@Component({
5 selector: 'app-root',
6 template: `<h1>I'm a template!</h1>`,
7 styleUrls: ['./app.component.css']
8})
9export class AppComponent {
10
11 constructor() {}
12
13}
...或者您可以在单独的文件中定义模板：
1import { Component } from '@angular/core';
2
3@Component({
4 selector: 'app-root',
5 templateUrl: './app.component.html',
6 styleUrls: ['./app.component.css']
7})
8export class AppComponent {
9
10 constructor() {}
11
12}
1[label app.component.html]
2<h1>I'm a template!</h1>
<$>[注]这主要是一个偏好问题，内联模板通常非常适合较小的组件。<$>
数据绑定
当涉及到模板时，ANGLE的核心功能是能够绑定到组件类的数据或绑定到事件。根据您所需的不同风格，数据绑定的方式会有所不同：
插值法
使用内插绑定替换组件中的值：
1<span>User name: {{ name }}</span>
插值语法也可以计算表达式。下面将输出Hello you：
1<span>
2 Hello {{ 1 + 1 === 3 ? 'me' : 'you' }}
3</span>
您可以在插补表达式中使用3个新运算符：
- 安全导航操作符？..防止在您尝试访问空或未定义的对象上的值时，JavaScript引擎会发出警告。当您尝试访问的属性为空或未定义的值时，该语句将被忽略，而不会导致错误：
1{{ user?.preferences?.avatar }}
1{{ user?.name | uppercase }}
- 非空断言运算符！..通知类型脚本检查器，如果它遇到可能为空或未定义的值，则不要出错。仅当您对TypeScrip使用--strictNullChecks标志时才使用此选项：
1{{ user!.preferences!.nickName | uppercase }}
<$>[警告]不能使用更改值或有副作用的表达式。例如，您不能在内插表达式中赋值变量。<$>
属性绑定
可以将组件中的数据绑定到元素上的属性。例如，假设User是我们的Component类中的一个对象，它具有名称属性：
1<input type="text" [value]="user.name">
事件绑定
使用(Event)=方法()语法将用户事件绑定到组件类上的方法：
1<button type="button" (click)="showProfile()">View Profile</button>
双向绑定
如果您希望数据从模板流向组件，也希望数据从组件流向模板，则可以使用双向绑定：
1<input type="text" [(ngModel)]="user.name">
这样，对输入值的更改将反映在User对象的Name属性中，如果您的组件具有更改user.name 值的方法，则结果也将自动反映在输入中。
<$>[警告]请注意，您必须在根模块中导入FormsModule 才能使用双向数据绑定语法。<$>
样式和类绑定
主要有4种方式可以绑定到模板中的样式或类：
样式属性绑定
使用常规属性绑定语法，可以为特定样式属性定义值：
1<span [style.background-color]="'pink'">{{ user.name }}</span>
...或者，您可以使用类似以下内容来绑定到组件中的值：
1<span [style.background-color]="user.color">{{ user.name }}</span>
ngStyle属性指令
您可以使用ngStyle属性指令同时应用多个样式属性：
1<p [ngStyle]="userStyles">
2 {{ user.name }}
3</p>
组件中的UserStyle可能如下所示：
1userStyles = {
2 backgroundColor: 'papayawhip',
3 border: '2px solid #666',
4 width: '50%',
5 margin: '0 auto',
6 textAlign: 'center',
7 padding: '2rem'
8};
类属性绑定
类似于Style属性绑定，但如果表达式的计算结果为True，则应用类。在此示例中，如果User对象上有颜色属性，则范围将具有高亮显示 类：
1<span [class.highlight]="user.color">{{ user.name }}</span>
ngClass属性指令
类似于ngStyle属性指令，并允许一次设置多个类：
1<p [ngClass]="setClasses()">
2 {{ user.name }}
3</p>
在Component类中：
1setClasses() {
2 const classes = {
3 'has-avatar': this.user.avatar,
4 'new-user': this.user.newUser,
5 bg: this.user.preferences.color
6 };
7 return classes;
8}
如果ngClass期望的对象中的属性名称的值为True，则它将成为应用的类名。
模板引用
要允许元素从模板中访问其他元素，可以在元素上创建引用变量，称为模板引用变量。只需使用# 符号后跟唯一标识符名即可：
1<input type="text" #color placeholder="Hex color value">
2<button (click)="printValue(color.value)">
3 Show color
4</button>
管道
使用管道对插值值进行简单变换。下面设置包含日期值的属性的格式，格式类似于2017年8月8日星期二：
1<span>
2 Published: {{ publishedDate | date:'fullDate' }}
3</span>
结构化指令
Angular提供了3个影响DOM中元素的内置结构指令：
狐狸。
如果传递到ngIf指令的表达式的计算结果为真，则元素将被添加到DOM中，否则将从DOM中删除：
1<span *ngIf="publishedDate">
2 Published: {{ publishedDate | date:'fullDate' }}
3</span>
从角度4开始，您还可以定义引用模板的Else子句，如果表达式的计算结果为FALSE，则使用该模板：
1<span *ngIf="publishedDate; else noPublishedDate">
2 Published: {{ publishedDate | date:'fullDate' }}
3</span>
4<ng-template #noPublishedDate>
5 😿 No published date
6</ng-template>
ngFor
就像模板的for循环一样，ngFor迭代数组中的值，并为每个项目创建它所附加的元素的副本。在这个例子中，users是我们组件类中可用的用户对象数组：
1<ul>
2 <li *ngFor="let user of users">
3 name: {{ user.name }}, email: {{ user.email }}
4 </li>
5</ul>
您还可以使用x语法获得索引的迭代索引：
1<ul>
2 <li *ngFor="let user of users; index as i">
3 {{ i + 1 }}- name: {{ user.name }}, email: {{ user.email }}
4 </li>
5</ul>
NGSwitch
等同于Switch语句，其中计算多个可能的值，但对于您的模板：
1<div [ngSwitch]="user.gender">
2 <span *ngSwitchCase="'m'">Male</span>
3 <span *ngSwitchCase="'f'">Female</span>
4 <span *ngSwitchDefault>Not provided</span>
5</span>