Angular 2 模板语法学习笔记

插值表达式

插值表达式用于将组件中的属性值绑定到模板中的文本内容当中，使用一对花括号 {} 来表示。

例如，要在模板中显示一个组件的 name 属性值，可以使用以下插值表达式：

htmlCopy Code
<p>Welcome, {{ name }}!</p>

属性绑定用于将组件中的属性值绑定到模板中的 HTML 元素的属性上，使用一对方括号 [] 来表示。

例如，要将组件的 title 属性值绑定到一个按钮元素的 title 属性上，可以使用以下属性绑定语句：

htmlCopy Code
<button [title]="title">Click me!</button>

事件绑定用于将模板中的用户动作（例如点击、键盘输入等）绑定到组件中的方法上，使用一对圆括号 () 来表示。

例如，要让一个按钮元素在被点击时调用组件的 onClick 方法，可以使用以下事件绑定语句：

htmlCopy Code
<button (click)="onClick()">Click me!</button>

双向数据绑定用于将模板中的用户动作（例如输入框的输入）同步到组件中的属性值上，并且将组件中属性值的变化自动同步到模板中的视图上，使用一对方括号和圆括号 [(ngModel)] 来表示。

例如，要将一个输入框元素的值绑定到组件的 name 属性上，并同时实现属性值变化时自动更新视图，可以使用以下双向数据绑定语句：

htmlCopy Code
<input [(ngModel)]="name">

*ngIf 指令用于根据组件中的条件表达式来显示或隐藏模板中的 HTML 元素，它相当于一个简化版的 if 语句。使用方式为在需要进行条件判断的 HTML 元素上添加 *ngIf 属性，并设置其值为条件表达式。

例如，下面的代码会根据组件中的 isVisible 属性值来显示或隐藏一个 div 元素：

htmlCopy Code
<div *ngIf="isVisible">This div is visible.</div>

ngFor 指令用于循环遍历组件中的数组或对象，并渲染对应的 HTML 模板块。使用方式为在需要进行循环遍历的 HTML 元素上添加 ngFor 属性，并设置其值为需要遍历的数据和循环变量名。

例如，下面的代码会循环遍历一个名为 heroes 的数组，并渲染对应的列表项：

htmlCopy Code
<ul>
  <li *ngFor="let hero of heroes">{{ hero }}</li>
</ul>

以上就是本次学习笔记的总结，希望对你有所帮助。