我一直在阅读《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 指令.这是否意味着它们是用于计算表达式的指针?比如[id]="movieId"等于角1中的id="movie-{{movieId}}"

最后是括号:

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

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

我想真正的问题是,这些符号在Angular 2中有没有特殊的意义,知道when to use each one最简单的方法是什么?谢谢!!

推荐答案

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

  • directiveName-是 struct 指令的简写形式,其中长形式只能应用于<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>上,对该元素的引用
    • 在角组件上,指向该组件的引用
    • 在定义了exportAs:"ngForm"的角组件或具有角指令的元素上,#myVar="ngForm"创建对该组件或指令的引用.

Angular相关问答推荐

通过CSS更改PrimeNG复选框的默认收件箱图标

如何使用新的@for遍历Angular 为17的对象?

如果Angular 模块是独立的,为什么我不需要在App模块中使用RouterModule?

第15角Cookie的单元测试用例

Angular KendoGrid RowReorderable,drop不适用于新添加的行

将ngModel绑定到@Input属性是不是一种糟糕的做法?

对Angular 为17的路径使用AuthGuard

在以下位置升级到Angular 16 Break Sharepoint广告:This._history.replaceState不是函数

Angular 16 Auth Guard在具有0的服务时给出Null Injector错误;httpclient;被注入

如何修复不允许的HttpErrorResponse 405?

Angular 信号 - 使用 mutate() 与使用 forEach() react 性

如何在Cypress 测试中切换 Angular 选项卡

带有 Angular 2 的 Django

不再需要 core-js 了吗?

Angular 4 - 在下拉列表中 Select 默认值 [Reactive Forms]

Electron - 不允许加载本地资源

Angular 5 手动导入语言环境

无法从模块it was neither declared nor imported导出服务

AOT - Angular 6 - 指令 SomeComponent,预期 0 个参数,但go 有 1 个参数

将 Angular 5 升级到 6 时,我得到不兼容的对等依赖(使用 ng update @angular/core)