是什么在Angular2括号，括号和星号之间的区别？ [英] What is the difference between parentheses, brackets and asterisks in Angular2?

问题描述

我一直在阅读中的角网站，并有一件事我没有完全理解是这些特殊字符之间的差异。例如，一个使用星号：

I have been reading the Angular 1 to 2 quick reference in the Angular website, and one thing I didn't completely understand was the difference between these special characters. For example one that uses asterisks:

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

据我了解这里的哈希（＃）符号定义电影作为本地模板变量，但在此之前什么是星号 ngFor 是什么意思？而且，有必要吗？

I understand here that the hash (#) symbol defines movie as a local template variable, but what does the asterisk before ngFor mean? And, is it necessary?

接下来，是使用括号中的例子：

Next, are the examples that use brackets:

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

我有所了解，围绕 routerLink 括号将其绑定到HTML属性/角指令。这是否意味着他们是一个指针角度来评价一个前pression？像 [ID] =movieId是 ID的当量=电影 - {{movieId}}在角1？

I somewhat understand that the brackets around routerLink bind it to that HTML attribute / Angular directive. Does this mean that they are a pointer for Angular to evaluate an expression? Like [id]="movieId" would be the equivalent of id="movie-{{movieId}}" in Angular 1?

最后，有括号：

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

难道这些只用于DOM事件，我们可以使用其他的事件，如（负载）=someFn（）或（的mouseenter）= someFn（）？

我想真正的问题是，这些符号在角2有特殊的含义，什么是知道最简单的方法何时使用每一个？谢谢！

I guess the real question is, do these symbols have a special meaning in Angular 2, and what is the easiest way to know when to use each one? Thanks!!

推荐答案

所有的细节都可以找到她的 https://angular.io/docs/ts/latest/guide/template-syntax.html

All details can be found her https://angular.io/docs/ts/latest/guide/template-syntax.html

• directiveName - 是从结构的指令短手，其中多头形态只能适用于＆LT;模板＆GT; 标记。短格式封装隐含它在的应用的元素一个＆LT;模板方式＆gt;

• directiveName - is the short hand from for structural directives where the long form can only be applied to <template> tags. The short form implicitely wraps the element where it's applied in a <template>.

[道具] =值是对象绑定属性（ @input（）的角度成分或指令或DOM元素的属性）。结果
有特殊形式：

[prop]="value" is for object binding to properties (@Input() of an Angular component or directive or a property of a DOM element).
There are special forms:

• [class.className] 绑定到一个类启用/禁用


• [style.styleName] 绑定到样式属性


• [style.styleName.px] 绑定到样式属性与preSET单元


• [attr.attrName] 的值绑定到一个属性（可见的DOM，而性能是不可见的）


• [role.roleName] 绑定到ARAI角色属性（尚未公布）

• [class.className] binds to a class to enable/disable it
• [style.styleName] binds to a style property
• [style.styleName.px] binds to a style property with a preset unit
• [attr.attrName] binds a value to an attribute (visible in the DOM, while properties are not visible)
• [role.roleName] binds to the ARAI role attribute (not yet available)

道具={{值}}绑定一个值的属性。该值字符串化

prop="{{value}}" binds a value to a property. The value is stringified

（事件）=expr的绑定一个事件处理的 @Output（）或DOM事件

(event)="expr" binds an event handler to an @Output() or DOM event

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

#var or #var has different functions depending on the context

• 在一个 * ngFor =，在Y＃X; I =指数＃为迭代范围变量创建


• 在DOM元素＆LT; D​​IV＃mydiv＆GT; 来元素的引用


• 在一个角组件到组件的引用


• 在这是一个角度成分或有棱角的指令的元素，其中 EXPORTAS：ngForm定义，＃myVar的=ngForm 创建这个组件或指令的引用。

• In an *ngFor="#x in y;#i=index" scope variables for the iteration are created
• On a DOM element <div #mydiv> a reference to the element
• On an Angular component a reference to the component
• On an element that is an Angular component or has an Angular directive where exportAs:"ngForm" is defined, #myVar="ngForm" creates a reference to this component or directive.

这篇关于是什么在Angular2括号，括号和星号之间的区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！