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

问题描述

我正在尝试了解 HTML 绑定，因为我是 angular 的新手.有人可以解释以下语法之间的区别吗:

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.

感谢您的帮助！

推荐答案

有两种不同的想法..绑定和事件:

There are two different thinks.. bindings and events:

这是现场演示:https://plnkr.co/edit/gfJL9RCyYriqzP9zWFSk?p=预览

绑定

• 只绑定一个固定的字符串

<input value="test" />

• 使用表达式语法单向绑定固定字符串

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

• 单向绑定变量 test 与表达式语法
• one-way binding a variable test with expression-syntax

<input [value]="test" />

• 单向绑定变量test

<input value="{{ test }}" />

• 双向绑定变量test到这个输入

<input [(ngModel)]="test" />

活动

• 将点击事件绑定到我们的onClick-function
• bind click-event to our onClick-function

<button (click)="onClick($event)"></button>

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

这篇关于Angular 2:HTML 属性绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！