插值
<p>Message: {{ msg }}</p> <p [innerHTML]="msg"></p>
<!-- 写法一 --> <img src="{{ heroImageUrl }}"> <!-- 写法二,推荐 --> <img [src]="heroImageUrl"> <!-- 写法三 --> <img bind-src="heroImageUrl">
<button [disabled]="isButtonDisabled">Button</button>
<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
运算符 -
使用
;
或,
的链式表达式 -
自增或自减操作符 (
++
和--