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

Question

我一直在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中是否具有特殊含义,以及知道何时使用每个符号的最简单方法是什么？谢谢!!

Answer 1

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事件或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"创建对此组件或指令的引用.

或``bind``用于`[]`和`on -`用于`()`或`<template [ngFor]>`用于`*ngFor`. (13认同)
双向绑定(也称为"box6中的香蕉").它是`[ngModel] ="foo"(ngModelChange)="foo = $ event"的组合(或简称形式)``第一部分更新`当`foo`改变时,ngModel`属性(`@Input()ngModel;``NgModel`指令```,当`@Output()ngModelChange;`('NgModel`指令'时,第二部分更新`foo`发出一个事件.`NgModel`用于绑定值以形成元素和组件.`[(bar)]`可用于任何`@Input()栏;``@Output()barChange;`组合,也你自己的组件. (7认同)
[(ngModel)]是什么意思,即方括号内的括号？ (4认同)
@GünterZöchbauer `[prop]="value"` 和 `prop="{{value}}"` 除了语法有什么区别？它们都可以将值传递给组件中的 `@Input() value;`。 (2认同)
@DiPix` [prop] ="value"`可以赋值任何类型的值,`prop ="{{value}}"`总是在赋值之前将`value`字符串化,因此无法传递对象. (2认同)
谢谢你的解释。请原谅我直言不讳，“复杂”是 Angular 将人们带回到（微软阵营）的一件事，另一件事是太多的术语和文档使用术语解释它们，意味着术语解释术语，很快你就会迷失和沮丧。强大并不意味着复杂和困难。更简单，更简单，更简单。再次感谢你！ (2认同)

Answer 2

[] - 属性绑定 从数据源到视图目标的单向.例如

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

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

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

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

我们可以使用on-而不是()

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

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

我们可以使用bindon而不是[()]

Answer 3

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