# Angular 模板语法

# 插值 (Interpolation)

<p>{{title}}</p>
<div><img src="{{itemImageUrl}}"></div>
<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}.</p>
1
2
3
  • getVal() 是对应的 component 的方法,可以直接调用。

# 表达式上下文 (Expressions Context)

  • 模板输入变量
<ul>
  <li *ngFor="let customer of customers">{{customer.name}}</li>
</ul>
1
2
3
  • 模板引用变量
<label>Type something:
  <input #customerInput>{{customerInput.value}}
</label>

<input #phone placeholder="phone number" />
<!-- phone refers to the input element; pass its `value` to an event handler -->
<button (click)="callPhone(phone.value)">Call</button>
1
2
3
4
5
6
7

# 模板语句

<button (click)="onSave($event)">Save</button>
<button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{hero.name}}</button>
<form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>
1
2
3

# 绑定语法

  • 数据源 => 视图 (source-to-view) (单向)
{{expression}}
[target]="expression"
bind-target="expression"

<!-- Bind button disabled state to `isUnchanged` property -->
<button [disabled]="isUnchanged">Save</button>

<div [class.special]="isSpecial">Special</div>
<button [style.color]="isSpecial ? 'red' : 'green'">
1
2
3
4
5
6
7
8
9
  • 视图 => 数据源 (view-to-source) (单向)
(target)="statement"
on-target="statement"

<button (click)="onSave($event)">Save</button>
<button on-click="onSave($event)">Save</button>
1
2
3
4
5
  • 双向 (view-to-source-to-view)
[(target)]="expression"
bindon-target="expression"

<input [(ngModel)]="name">
<input bindon-ngModel="name">
1
2
3
4
5
  • HTML attribute 与 DOM property 对比

    • HTML attribute 初始化 DOM property,然后它们的任务就完成了。property 的值可以改变;attribute 的值不能改变。

    • 模板绑定是通过 property 和事件来工作的,而不是 attribute。

    • 在 Angular 的世界中,attribute 唯一的作用是用来初始化元素和指令的状态。 当进行数据绑定时,只是在与元素和指令的 property 和事件打交道,而 attribute 就完全靠边站了。

# 内置属性指令

  • ngClass

    • 添加、删除 CSS 类
  • ngStyle

    • 添加、删除 HTML Style
  • ngModel

    • 双向绑定到一个 HTML Form 控件
最近更新: 11/29/2019, 9:29:09 PM