angular6 模板引用# 星号前缀*

文章参考

  1. 模板引用变量 ( #var )
  2. 星号(*)前缀

模板引用变量

模板引用变量通常用来引用模板中的某个 DOM 元素,它还可以引用 Angular 组件或指令或Web Component。
使用井号 (#) 来声明引用变量

<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>

#phone 的意思就是声明一个名叫 phone 的变量来引用 元素。

可以用 ref- 前缀代替

<input ref-fax placeholder="fax number">
<button (click)="callFax(fax.value)">Fax</button>

注意事项

  1. 模板引用变量的作用范围是整个模板。 不要在同一个模板中多次定义同一个变量名,否则它在运行期间的值是无法确定的。

星号(*)前缀

星号是一个用来简化更复杂语法的“语法糖”。 从内部实现来说,Angular 把 *ngIf 属性 翻译成一个 元素 并用它来包裹宿主元素,代码如下:

ngIf 指令

<div *ngIf="hero" class="name">{{hero.name}}</div>

等价于

<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>

*ngIf 指令被移到了 元素上。在那里它变成了一个属性绑定 [ngIf]。

上的其余部分,包括它的 class 属性在内,移到了内部的 元素上。

ngFor 指令

<div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">
  ({{i}}) {{hero.name}}
</div>

等价于

<ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById">
  <div [class.odd]="odd">({{i}}) {{hero.name}}</div>
</ng-template>

微语法

  • let 关键字声明一个模板输入变量,你会在模板中引用它。本例子中,这个输入变量就是 hero、i 和 odd。 解析器会把 let hero、let i 和 let odd 翻译成命名变量 let-hero、let-i 和 let-odd。

  • 微语法解析器接收 of 和 trackby,把它们首字母大写(of -> Of, trackBy -> TrackBy), 并且给它们加上指令的属性名(ngFor)前缀,最终生成的名字是 ngForOf 和 ngForTrackBy。 还有两个 NgFor 的输入属性,指令据此了解到列表是 heroes,而 track-by 函数是 trackById。

  • NgFor 指令在列表上循环,每个循环中都会设置和重置它自己的上下文对象上的属性。 这些属性包括 index 和 odd 以及一个特殊的属性名 $implicit(隐式变量)。

  • let-i 和 let-odd 变量是通过 let i=index 和 let odd=odd 来定义的。 Angular 把它们设置为上下文对象中的 index 和 odd 属性的当前值。

星号(*)语法比不带语法糖的形式更加清晰

没有更多推荐了,返回首页