本文介绍了Angular 2:HTML属性绑定的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图理解HTML绑定,因为我是新角色。
有人可以解释以下语法之间的区别:
<! - 1 - >
< button name1 =name2> test< / button>
<! - 2 - >
< button(name1)=name2>测试< /按钮>
<! - 3 - >
< button [name1] =name2> test< / button>
<! - 4 - >
< button([name1])=name2>测试< /按钮>
我曾在多个地方见过,但无法理解每个案例的用途。
感谢您的帮助!
解决方案
有两种不同的想法。和事件:
下面是一个实时演示:
绑定
- 仅绑定一个固定字符串
< input value =test/>
- 单向绑定带表达式的固定字符串 >
< input [value] ='test'/> ;
- 单向绑定变量
test
with expression-syntax
< ; input [value] =test/>
- 单向绑定变量
test
< input value = {{test}}/>
- 双向绑定变量
test
到此输入
$ b
< input [(ngModel)] =test/>
活动
onClick
-function
< button(click)=onClick($ event)>< / button>
官方文档:
I'm trying to understand the HTML bindings as I'm new to angular.Can someone please explain the difference between the following syntax:
<!-- 1 -->
<button name1 = "name2" >test</button>
<!-- 2 -->
<button (name1) = "name2" >test</button>
<!-- 3 -->
<button [name1] = "name2" >test</button>
<!-- 4 -->
<button ([name1]) = "name2" >test</button>
I have seen above in multiple places but could not understand the purpose of each case.
Thank you for the help!
解决方案
There are two different thinks.. bindings and events:
Here's a live-demo: https://plnkr.co/edit/gfJL9RCyYriqzP9zWFSk?p=preview
Binding
- binds just a fixed string
<input value="test" />
- one-way binding a fixed string with expression-syntax
<input [value]="'test'" />
- one-way binding a variable
test
with expression-syntax
<input [value]="test" />
- one-way binding a variable
test
<input value="{{ test }}" />
- two-way bindig the variable
test
to this input
<input [(ngModel)]="test" />
Events
- bind click-event to our
onClick
-function
<button (click)="onClick($event)"></button>
official docs: https://angular.io/docs/ts/latest/guide/template-syntax.html
这篇关于Angular 2:HTML属性绑定的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!