Angular2 中的括号、方括号和星号有什么区别? [英] What is the difference between parentheses, brackets and asterisks in Angular2?
问题描述
我一直在阅读 Angular 网站,我没有完全理解的一件事是这些特殊字符之间的区别.例如一个使用星号的:
<td>{{movie.title}}</td></tr>我在这里理解散列 (#) 符号将 movie
定义为本地模板变量,但是 ngFor
之前的星号是什么意思?还有,有必要吗?
接下来是使用方括号的例子:
<a [routerLink]="['Movies']>Movies</a>
我有点理解 routerLink
周围的括号将它绑定到那个 HTML 属性/Angular 指令.这是否意味着它们是 Angular 评估表达式的指针?就像 [id]=movieId"
会等价于 Angular 1 中的 id=movie-{{movieId}}"
?
最后是括号:
这些是否仅用于 DOM 事件,我们是否可以使用其他事件,例如 (load)=someFn()"
或 (mouseenter)=someFn()"?
?
我想真正的问题是,这些符号在 Angular 2 中是否有特殊含义,了解何时使用每个符号的最简单方法是什么?谢谢!!
解决方案 可以在此处找到所有详细信息:https://angular.io/docs/ts/latest/guide/template-syntax.html
directiveName
- 是结构指令的简写形式,其中长形式只能应用于
标签.简短形式隐式地将应用它的元素包装在
中.
[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 元素上
对元素的引用 - 在 Angular 组件上引用该组件
- 在定义了
exportAs:"ngForm"
的 Angular 组件或具有 Angular 指令的元素上,#myVar="ngForm"
创建对此的引用组件或指令. I have been reading the Angular 1 to 2 quick reference in the Angular website, and one thing I didn't completely understand was the difference between these special characters. For example one that uses asterisks:
<tr *ngFor="#movie of movies">
<td>{{movie.title}}</td>
</tr>
I understand here that the hash (#) symbol defines movie
as a local template variable, but what does the asterisk before ngFor
mean? And, is it necessary?
Next, are the examples that use brackets:
<a [routerLink]="['Movies']">Movies</a>
I somewhat understand that the brackets around routerLink
bind it to that HTML attribute / Angular directive. Does this mean that they are a pointer for Angular to evaluate an expression? Like [id]="movieId"
would be the equivalent of id="movie-{{movieId}}"
in Angular 1?
Lastly, are parentheses:
<button (click)="toggleImage($event)">
Are these only used for DOM events and can we use other events like (load)="someFn()"
or (mouseenter)="someFn()"
?
I guess the real question is, do these symbols have a special meaning in Angular 2, and what is the easiest way to know when to use each one? Thanks!!
解决方案 All details can be found here: 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.
这篇关于Angular2 中的括号、方括号和星号有什么区别?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆