时间:2021-05-28
简介
使用插值表达式将一个表达式的值显示在模版上
<img src="{{imgUrl}}" alt=""><h1>{{productTitle}}</h1>使用方括号将HTML标签的一个属性值绑定到一个表达式上
<img [src]="imgUrl" alt="">使用小括号将组件控制器的一个方法绑定到模版上面的一个事件的处理器上
<button (click)="onClickButton($event)">按钮绑定事件</button>注意
在开始下面的例子之前,请先确认已经新建了一个工程。如果没有,请查看:Angular2学习笔记之Angular CLI 安装和使用教程
事件绑定
准备工作
了解目的:在模版的界面上面增加一个按钮,然后通过小括号绑定一个事件。
新建一个 bind 组件,使用命令: ng g c bind
修改 bind.component.html
<!-- 界面增加代码 --><button (click)="onClickButton($event)">按钮绑定事件</button>修改 bind.component.ts
//在 BindComponent 类方法中增加方法体onClickButton(event: any){ console.log(event);}修改 app.component.html
<!-- 增加 app-bind 组件 --><app-bind></app-bind>图示:
Dom属性绑定
例子一
插值表达式 与 属性绑定 之间的关系
两种方式都可以实现,angular 在实现的逻辑上面是: 在程序加载组件的时候,会先将 "插值表达式" 翻译为 "属性绑定"
修改 bind.component.html
<!-- 界面增加代码 --><!-- 属性绑定 --><img [src]="imgUrl" alt=""><!-- 插值表达式绑定 --><img src="{{imgUrl}}" alt="">修改 bind.component.ts
//增加变量imgUrl: string = http://placehold.it/320x280;图示:
例子二
dom 属性 与 html 属性的区别
HTML元素的 DOM属性和 HTML 属性是有部分区别的,这点需要明确差异。
修改 bind.component.html
<!-- 增加代码 --><div> <input type="text" value="Tom" (input)="onInputEvent($event)"></div>修改 bind.component.ts
//增加 event事件onInputEvent(event: any){ //获取的是 dom 属性,即输入属性 console.log(event.target.value); //获取的是 html 属性,也就是初始化的属性 console.log(event.target.getAttribute("value"));}图示:
总结:
1.少量的 HTML属性和 DOM属性之间有这 1 :1 的映射关系,如 :id
2.有些有 HTML属性,没有DOM 属性, 如:colspan
3.有些有 DOM属性,没有HTML 属性,如:textContent
4.就算名字一样,DOM属性和HTML属性获取的内容可能不一样
5.模版绑定是通过DOM属性绑定的,而不是通过HTML属性
6.HTML属性指定了初始值,DOM属性表示当前值;DOM属性的值可以改变,HTML的值不能改变
例子部分完整代码
bind.component.html
<p> bind works!</p><button (click)="onClickButton($event)">按钮绑定事件</button><div> <!-- 属性绑定 --> <img [src]="imgUrl" alt=""> <!-- 插值表达式绑定 --> <img src="{{imgUrl}}" alt=""></div><div> <input type="text" value="Tom" (input)="onInputEvent($event)"></div>bind.component.ts
import { Component, OnInit } from '@angular/core';@Component({ selector: 'app-bind', templateUrl: './bind.component.html', styleUrls: ['./bind.component.css']})export class BindComponent implements OnInit { imgUrl: string = "http://placehold.it/320x280"; constructor() { } ngOnInit() { } onClickButton(event: any){ console.log(event); } onInputEvent(event: any){ //获取的是 dom 属性,即输入属性 console.log(event.target.value); //获取的是 html 属性,也就是初始化的属性 console.log(event.target.getAttribute("value")); }}以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Angular2我自己还在摸索学习中,本文介绍了angular2+node.jsexpress打包部署的实战,分享给大家,也给自己留个笔记angular是客户端
angular2在双向数据绑定时[(ngModel)]无法使用,出现的错误是:Can'tbindto'ngModel'sinceitisn'taknownpro
大致介绍Angular2中数据绑定的方式默认是以单向方式,数据绑定的方式可以分为:1、属性绑定和插值表达式组件类->模板2、事件绑定:模板->组件类3、双向绑定
在这一章节中,我们来学习如何使用Angular2来展示数据,以及如何使用它的内置指令NgFor和NgIf首先要确保你有一个可以运行起来的Angular2的样例程
背景以springboot为tomcat启动的框架,以angular2为前端页面的框架,最后需要将angular2的代码运行在springboot内置tomca