我一直在阅读Angular网站上的Angular 1到2快速参考,有一件事我不太明白,那就是这些特殊字符之间的区别。例如,使用星号的代码:

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

我明白这里哈希(#)符号定义电影作为一个本地模板变量,但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中有特殊的含义吗?知道何时使用它们最简单的方法是什么?谢谢! !


当前回答

[]—属性绑定 从数据源到视图目标的单向方式。 如

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

我们可以用bind-代替[]

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

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

我们可以用on-代替()

[()]-一个盒子里的双向绑定香蕉

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

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

其他回答

[]—属性绑定 从数据源到视图目标的单向方式。 如

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

我们可以用bind-代替[]

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

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

我们可以用on-代替()

[()]-一个盒子里的双向绑定香蕉

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

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

如前所述,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>

最后值得一提的是,上面所有的方法也适用于你的组件,例如,如果你在组件中创建了一个方法,它将被using()调用:

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

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

directiveName - is the short hand form 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>. [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] binds to a css class to enable/disable it [style.stylePropertyName] binds to a style property [style.stylePropertyName.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 ARIA role attribute (not yet available) prop="{{value}}" binds a value to a property. The value is stringified (aka interpolation) (event)="expr" binds an event handler to an @Output() or DOM event #var or #var has different functions depending on the context In an *ngFor="#x in y;#i=index" scope variables for the iteration are created (In beta.17 this is changed to *ngFor="let x in y; let i=index"`) 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.