Angular 2：HTML属性绑定 [英] Angular 2 : HTML property binding

问题描述

我试图理解HTML绑定，因为我是新角色。
有人可以解释以下语法之间的区别：

 <！ -  1  - > 
< button name1 =name2> test< / button> 
<！ -  2  - > 
< button（name1）=name2>测试< /按钮> 
<！ -  3  - > 
< button [name1] =name2> test< / button> 
<！ -  4  - > 
< button（[name1]）=name2>测试< /按钮> 
  

我曾在多个地方见过，但无法理解每个案例的用途。

感谢您的帮助！

解决方案

有两种不同的想法。和事件：

下面是一个实时演示： https://plnkr.co/edit/gfJL9RCyYriqzP9zWFSk?p=preview

绑定

• 仅绑定一个固定字符串

 < input value =test/> 
  

• 单向绑定带表达式的固定字符串
>

 < input [value] ='test'/> ; 
  

• 单向绑定变量 test with expression-syntax

 < ; input [value] =test/> 
  

• 单向绑定变量 test

< input value = {{test}}/>


• 双向绑定变量 test 到此输入


$ b

 < input [（ngModel）] =test/> 
  

活动




• 将click-event绑定到我们的 onClick -function






 < button（click）=onClick（$ event）>< / button> 
  

官方文档： https://angular.io/docs/ts/latest/guide/template-syntax.html




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属性绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！