1. 首页
  2. 问题
  3. Angular2中的圆括号、方括号和星号有什么区别？
小编典典

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

all

我一直在阅读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}}"Angular 1中一样？

最后是括号：

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

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

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


阅读 133

收藏
2022-07-01

共1个答案

小编典典

所有细节都可以在这里找到：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"创建对该组件或指令的引用。
2022-07-01