引言
在前端开发中，Angular 是一种流行的 JavaScript 框架，它提供了一种叫做模板语法的技术，能够在 HTML 中添加逻辑和动态绑定属性。本篇文章将介绍 Angular 模板语法的基本使用，包括模板语法的数据绑定、指令和管道。同时，也给出了适用的示例代码。
模板语法的基本特点
Angular 的模板语法具有以下几个特点：
- 使用双花括号 {{}} 实现数据绑定；
- 使用方括号 [] 实现属性绑定；
- 使用圆括号 () 实现事件绑定；
- 使用中括号 [()] 实现双向数据绑定；
- 使用 *ngIf 实现条件渲染；
- 使用 *ngFor 实现列表循环；
- 使用指令和管道实现自定义的操作和转换；
- 组件间通过输入和输出实现数据交互。
接下来，我们将详细介绍每一个特点。
数据绑定
在 Angular 中，使用双花括号 {{}} 实现数据绑定。例如：
<p>Welcome {{name}}!</p>在组件中，将 name 赋值为 'Angular'，则显示的信息为：Welcome Angular!。如果 name 发生了变化，那么显示的信息也会相应地发生改变。
属性绑定
属性绑定使用方括号 [] 实现，比如：
<input [value]="name">
输入框的值绑定到组件的 name 属性上。当用户输入内容时，name 的值也会随之改变。在绑定时，也可以使用表达式：
<img [src]="'https://example.com/' + imagePath">
这里 imagePath 是组件中的属性，表示图片的路径。
事件绑定
在 Angular 中，使用圆括号 () 实现事件绑定。例如：
<button (click)="onClick()">Click me</button>
按钮被点击后就会调用组件中的 onClick 方法。也可以传递事件对象作为参数：
<input (keyup)="onKeyup($event)">
可以在 onKeyup 方法中获取事件对象 event，即 $event。
双向绑定
双向数据绑定是 Angular 的重要特性之一，与 Vue 和 React 不同，Angular 双向绑定使用中括号 [()] 实现。例如：
<input [(ngModel)]="name">
该语法与属性绑定和事件绑定类似，但是它实现了输入框值与组件属性的双向绑定。因此，在任意时刻，输入框和组件属性的值都是一致的。
要使用双向绑定功能，则需要在组件的模块文件中导入 FormsModule。
条件渲染
条件渲染使用 *ngIf 实现。例如：
<div *ngIf="showContent">Content</div>
只有当 showContent 为 true 时，才会渲染出 Content。
*ngIf 也支持 else 语法：
<div *ngIf="showContent; else noContent">Content</div> <ng-template #noContent>No Content</ng-template>
当 showContent 为 false 时，就会渲染出 No Content。
列表循环
列表循环使用 *ngFor 实现。例如：
<ul>
<li *ngFor="let item of items">{{item}}</li>
</ul>使用 *ngFor 循环遍历了 items 数组，并根据数组中的每一个值生成一个列表项。在循环中也可以使用索引值，例如：
<ul>
<li *ngFor="let item of items; let i = index">{{i}}. {{item}}</li>
</ul>这里使用了 let i = index 表示 i 为索引值。
指令和管道
除了内置的指令和管道，Angular 还支持自定义指令和管道。自定义指令可以用来实现类似于 v-show 的操作，而自定义管道可以用来实现日期格式化等操作。
输入和输出
在组件中可以使用 @Input 和 @Output 装饰器来实现组件之间的数据交互。@Input 用于组件输入属性，@Output 用于组件输出属性。
例如：
@Component({
selector: 'app-child',
template: '{{name}}',
})
export class ChildComponent {
@Input() name: string;
@Output() onChange = new EventEmitter();
}在父组件中就可以使用 child 组件并传递参数：
<app-child [name]="parentName" (onChange)="onChildChange($event)"></app-child>
当 child 组件中的数据发生变化时，会向父组件发射一个事件，即 onChange。
总结
本篇文章介绍了 Angular 的模板语法，包括数据绑定、属性绑定、事件绑定、双向绑定、条件渲染、列表循环、指令和管道以及输入和输出。通过这些方式，可以实现前端开发中的一些强大的功能，提高开发效率和用户体验。更多的 Angular 技术，请参考官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6479f635968c7c53b05da5f2