Question

我一直在阅读Angular website中的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"类似，它与Angular 1中的id="movie-{{movieId}}"等效吗？

最后，是括号：

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

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

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

Answer 1

directiveName - 是结构指令的简写形式，其中长形式只能应用于<template>标签。短格式隐含地将元素包含在<template>中的应用位置。
[prop]="value"用于对象绑定到Angular组件或指令的属性（@Input()或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"创建对该组件或指令的引用。

Answer 2

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

＆＃13;

top:0

＆＃13;

我们可以使用bind-而不是[]

（） - ＆gt;事件绑定 从视图目标到数据源的单向

＆＃13;

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

＆＃13;

我们可以使用on-而不是（）

[（）] - 双向绑定香蕉盒

＆＃13;

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

＆＃13;

我们可以使用bindon-代替[（）]

Answer 3

如上所述，Angular文档，特别是“英雄教程”，更深入地解释了这一点。 Here is the link if you want to check it out

括号是您正在处理的元素的事件，例如单击按钮就像您的示例;这也可以是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>

Answer 4

是的，它们确实有特殊含义。最简单的方法是阅读文档。