Angular2中的括号，方括号和星号有什么区别？

151

我一直在Angular网站上阅读Angular 1到2快速参考，而我不完全了解的是这些特殊字符之间的区别。例如，使用星号的一个：

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

我在这里理解哈希（＃）符号定义movie为本地模板变量，但是之前的星号ngFor是什么意思？并且，有必要吗？

接下来，是使用方括号的示例：

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

我有些理解，方括号routerLink将其绑定到该HTML属性/ Angular指令。这是否意味着它们是Angular评估表达式的指针？就像[id]="movieId"是相当于id="movie-{{movieId}}"在1角？

最后是括号：

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

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

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

angular

— 大卫·梅萨（David Meza）
source

Answers:

153

所有详细信息都可以在这里找到：https : //angular.io/docs/ts/latest/guide/template-syntax.html

directiveName-是结构指令的简写形式，其中长形形式只能应用于<template>标签。简短形式将元素隐式包装在元素中<template>。
[prop]="value"用于将对象绑定到属性（@Input()Angular组件或指令的属性或DOM元素的属性）。
有特殊形式：
- [class.className] 绑定到CSS类以启用/禁用它
- [style.stylePropertyName] 绑定到样式属性
- [style.stylePropertyName.px] 用预设单位绑定到样式属性
- [attr.attrName] 将值绑定到属性（在DOM中可见，而属性不可见）
- [role.roleName] 绑定到ARIA角色属性（尚不可用）
prop="{{value}}"将值绑定到属性。该值是字符串化的（又名插值）
(event)="expr"将事件处理程序绑定到@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组件或exportAs:"ngForm"定义了Angular指令的元素上，#myVar="ngForm"创建对此组件或指令的引用。

— 贡特·佐赫鲍尔（GünterZöchbauer）
source

或bind-为[]或on-为()或<template [ngFor]>为*ngFor。

— 君特Zöchbauer

[（ngModel）]是什么意思，即方括号内的括号？

— Usman

双向绑定（也称为在BOX6“香蕉）。这是组合的（或短型）[ngModel]="foo" (ngModelChange)="foo = $event"，其中第一部分更新ngModel财产（@Input() ngModel;的NgModel指令) when foo`变化和第二部分的更新foo时@Output() ngModelChange;（的NgModel指令）。发出一个事件NgModel被用于绑定值，以形成元件和部件。[(bar)]可用于任何@Input() bar; @Output() barChange;组合，也自己的组件的。

— 君特Zöchbauer

@GünterZöchbauer [prop]="value"和prop="{{value}}"语法有什么区别？它们都可以将值传递给@Input() value;in组件。

— DiPix

@DiPix [prop]="value"可以分配任何类型的值，prop="{{value}}"总是value在分配之前进行字符串化，因此对于传递对象没有用。

— 君特Zöchbauer

[]-属性绑定 从数据源到查看目标的单向方式。例如

{{expression}}
[target]="expression"
bind-target="expression"

我们可以使用bind-代替 []

()->事件绑定 从视图目标到数据源的单向方式

(target)="statement"
on-target="statement"

我们可以使用on-代替（）

[()]-盒装双向香蕉绑定

[(target)]="expression"
bindon-target="expression"

我们可以使用bindon-代替 [()]

— 沙金·钱德兰
source

如前所述，Angular文档，尤其是“英雄教程”，对此进行了更深入的说明。如果您想签出，这里是链接。

括号是您正在处理的元素的事件，例如单击示例按钮。这也可能是该元素的mousedown，keyup，onselect或任何操作/事件，以及=调用方法的名称之后是什么-使用调用括号。该方法应在您的组件类上定义，即：

<element (event)="method()"></element>

括号以另一种方式起作用。它们是从您的类中获取数据（发送事件的括号的相反），因此一个常见的示例是使用如下样式：

<element [ngStyle]="{display:someClassVariable}">

看到？您正在根据模型/类为元素提供样式。

为此，您可以使用...

<element style="display:{{ModelVariable}};">

建议将双大括号用于将要在屏幕上打印的内容，例如：

<h1>{{Title}}</h1>

无论您使用什么，如果您保持一致，这将有助于代码的可读性。

最后，对于您的*问题，这是一个较长的解释，但非常重要：它抽象了某些方法的实现，否则您必须要做ngFor一些工作才能起作用。

一个重要的更新是，ngFor您将不再使用哈希；您需要改为使用let以下内容：

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

值得一提的最后一件事是，以上所有内容也适用于您的组件，例如，如果您在组件中创建方法，则将使用调用该方法()：

<my-owncomponent 
    (onSearched)="MethodToCall()" 
    [MyInputData]="SearchParamsArray"></my-owncomponent>

— 加里
source