本文介绍了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/> 

    活动


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

09-02 01:22