Angular2中的圆括号、方括号和星号有啥区别？

Posted 2023-03-05

【中文标题】Angular2中的圆括号、方括号和星号有啥区别？

【英文标题】：What is the difference between parentheses, brackets and asterisks in Angular2?Angular2中的圆括号、方括号和星号有什么区别？

【发布时间】：2016-06-26 23:10:28

【问题描述】：

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

【参考方案1】：

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

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

【讨论】：

或bind- 用于[] 和on- 用于() 或<template [ngFor]> 用于*ngFor。

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

双向绑定（也称为“盒子里的香蕉6”）。它是[ngModel]="foo" (ngModelChange)="foo = $event" 的组合（或简称），其中第一部分更新了ngModel 属性（@Input() ngModel; 的当@Output() ngModelChange;（NgModel 指令的）发出事件时，NgModel 指令) when foo` 发生变化，第二部分更新foo。NgModel 用于将值绑定到表单元素和组件。 [(bar)] 可用于任何 @Input() bar; @Output() barChange; 组合，也可用于您自己的组件。

@GünterZöchbauer [prop]="value" 和 prop="value" 除了语法之外还有什么区别？它们都可以将值传递给组件中的@Input() value;。

@DiPix [prop]="value" 可以分配任何类型的值，prop="value" 总是在分配之前将value 字符串化，因此无法传递对象。

【参考方案2】：

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

【参考方案3】：

[] - 属性绑定 从数据源到视图目标的一种方式。 例如

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

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

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

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

我们可以用on-代替()

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

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

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