ng-模板语法

插值

文本绑定

<p>Message: {{ msg }}</p>

<p [innerHTML]="msg"></p>

属性绑定

<!-- 写法一 -->
<img src="{{ heroImageUrl }}">

<!-- 写法二，推荐 -->
<img [src]="heroImageUrl">

<!-- 写法三 -->
<img bind-src="heroImageUrl">

在布尔特性的情况下，它们的存在即暗示为 true，属性绑定工作起来略有不同，在这个例子中：

<button [disabled]="isButtonDisabled">Button</button>

如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 特性甚至不会被包含在渲染出来的 <button> 元素中。

使用 JavaScript 表达式

<p>1 + 1 = {{ 1 + 1 }}</p>
<p>{{ num + 1 }}</p>
<p>{{ isDone ? '完了' : '没完' }}</p>
<p>{{ title.split('').reverse().join('') }}</p>

<p [title]="title.split('').reverse().join('')">{{ title }}</p>

<ul>
  <li [id]="'list-' + t.id" *ngFor="let t of todos">
    {{ t.title }}
  </li>
</ul>

编写模板表达式所用的语言看起来很像 JavaScript。 很多 JavaScript 表达式也是合法的模板表达式，但不是全部。

Angular 遵循轻逻辑的设计思路，所以在模板引擎中不能编写非常复杂的 JavaScript 表达式，这里有一些约定：

• 赋值 (=, +=, -=, ...)
• new 运算符
• 使用 ; 或 , 的链式表达式
• 自增或自减操作符 (++和--)

列表渲染

基本用法：

export class AppComponent {
  heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
}

<p>Heroes:</p>
<ul>
  <li *ngFor="let hero of heroes">
    {{ hero }}
  </li>
</ul>

也可以获取 index 索引：

<div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.name}}</div>

条件渲染

NgIf

<p *ngIf="heroes.length > 3">There are many heroes!</p>

ngIf 和 <ng-template>

<ng-template [ngIf]="condition"><div>...</div></ng-template>

NgSwitch

NgSwitch 的语法比较啰嗦，使用频率小一些。

<div [ngSwitch]="currentHero.emotion">
  <app-happy-hero    *ngSwitchCase="'happy'"    [hero]="currentHero"></app-happy-hero>
  <app-sad-hero      *ngSwitchCase="'sad'"      [hero]="currentHero"></app-sad-hero>
  <app-confused-hero *ngSwitchCase="'confused'" [hero]="currentHero"></app-confused-hero>
  <app-unknown-hero  *ngSwitchDefault           [hero]="currentHero"></app-unknown-hero>
</div>

事件处理

事件绑定只需要用圆括号把事件名包起来即可：

<button (click)="onSave()">Save</button>

可以把事件对象传递到事件处理函数中：

<button (click)="onSave($event)">On Save</button>

也可以传递额外的参数（取决于你的业务）：

<button (click)="onSave($event, 123)">On Save</button>

当事件处理语句比较简单的时候，我们可以内联事件处理语句：

<button (click)="message = '哈哈哈'">内联事件处理</button>

我们可以利用 属性绑定 + 事件处理 的方式实现表单文本框双向绑定：

<input [value]="message"
       (input)="message=$event.target.value" >

事件绑定的另一种写法，使用 on- 前缀的方式：

<!-- 绑定事件处理函数 -->
<button on-click="onSave()">On Save</button>

表单输入绑定

文本

<p>{{ message }}</p>
<input type="text" [(ngModel)]="message">

运行之后你会发现报错了，原因是使用 ngModel 必须导入 FormsModule 并把它添加到 Angular 模块的 imports 列表中。

导入 FormsModule 并让 [(ngModel)] 可用的代码如下：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
+++ import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
+++ FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

通过以上的配置之后，你就可以开心的在 Angular 中使用双向数据绑定了