angular - Angular2中圆括号、括号和星号有什么区别？

Question

我一直在阅读 Angular website 中的 Angular 1 到 2 快速引用，我不完全理解的一件事是这些特殊字符之间的区别。例如一个使用星号的:

<tr *ngFor="#movie of movies">
   <td>{{movie.title}}</td>
</tr>

我这里的理解是井号(#)将movie定义为局部模板变量，但是ngFor前的星号是什么意思呢？而且，有必要吗？

接下来是使用括号的例子:

<a [routerLink]="['Movies']">Movies</a>

我有点理解 routerLink 周围的括号将其绑定(bind)到该 HTML 属性/Angular 指令。这是否意味着它们是 Angular 用来计算表达式的指针？像 [id]="movieId" 相当于 Angular 1 中的 id="movie-{{movieId}}" 吗？

最后是括号:

<button (click)="toggleImage($event)">

这些仅用于 DOM 事件吗？我们可以使用其他事件，例如 (load)="someFn()" 或 (mouseenter)="someFn()" ？

我想真正的问题是，这些符号在 Angular 2 中是否有特殊含义？了解何时使用每个符号的最简单方法是什么？谢谢!!

Answer 1

可在此处找到所有详细信息:https://angular.io/docs/ts/latest/guide/template-syntax.html

• directiveName - 是结构指令的简写形式，其中长形式只能应用于 <template>标签。短形式隐式地将元素包装在 <template> 中应用的位置。 .

• [prop]="value"用于对象绑定(bind)到属性(Angular 组件或指令的 @Input() 或 DOM 元素的属性)。
  有特殊形式:

  • [class.className]绑定(bind)到 css 类以启用/禁用它
  • [style.stylePropertyName]绑定(bind)到样式属性
  • [style.stylePropertyName.px]绑定(bind)到具有预设单位的样式属性
  • [attr.attrName]将值绑定(bind)到属性(在 DOM 中可见，而属性不可见)
  • [role.roleName]绑定(bind)到 ARIA Angular 色属性(尚不可用)

• prop="{{value}}"将一个值绑定(bind)到一个属性。该值被字符串化(也称为插值)

• (event)="expr"将事件处理程序绑定(bind)到 @Output()或 DOM 事件

• #var或 #var根据上下文有不同的功能

  • 在 *ngFor="#x in y;#i=index" 中创建迭代的范围变量
    (在 beta.17 中，这被更改为 *ngFor="let x in y; let i=index"`)
  • 在 DOM 元素上 <div #mydiv>对元素的引用
  • 在 Angular 组件上引用该组件
  • 在作为 Angular 组件或具有 Angular 指令的元素上 exportAs:"ngForm"已定义，#myVar="ngForm"创建对此组件或指令的引用。