各位小伙伴久等了，上一节我们一起简单的了解了angular2的目录结构，最后简单的尝试了一下双向数据绑定。今天我们继续一起学习插值表达式、双向数据绑定和事件绑定。
1、好不好，看疗效
今天就不重新创建项目了，直接将上一节的hello-world项目修改一下。首先看一下两张效果图：
效果1
效果2
今天实现的例子是比较简单的，不过有几个重要的知识点需要掌握。下面我们先看代码。
app.component.html
<h1>
{{title}}
</h1>
<h2>My favorite hero is:{{myHero}}</h2>
<label for="name">user name</label>
<input [(ngModel)]="title" type="text" name="name" />
<button (click)="showMsg(title)">msg button</button>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Tour of Heroes';
myHero = 'yetangtang';
//绑定的单击事件方法
showMsg(myHero):void {
alert(myHero);
}
}
2、柔光自拍，闪瞎你的眼
- 2.1 app.component.html解读
h1和h2标签，使用了插值表达式。
{{title}}和{{myHero}}这两个表达式的作用分别是在h1和h2标签中展示title和myHero的属性值。这在上一小节也讲过一些，这个不难理解。
input标签使用了双向数据绑定。现在只要记住ngModel是一个指令（属性指令），我们可以通过ngModel完成双向数据绑定。该指令组合了属性绑定和事件绑定功能。属性绑定可以让input从组件中获取相对应的属性值；事件绑定可以将input的最新的值赋给组件中的属性。
button的绑定事件和平日我们写的普通的写法差距不是很大，
()告诉angular要绑定的是什么事件，然后在组件中去实现。
- 2.2** app.component.ts**解读
import语句主要是用来引入需要使用到的组件资源（文件），然后使用@Component装饰器来接收元数据，这里使用到的是 selector选择器，模板url等。通过
export关键字，可以让模块的某些对象声明为公共的。
PS：看起来东西是比较简单，其实有很多知识点是可以讲的，但是又怕一下子讲的太多让小伙伴们迷糊了，所以先讲这么多啦。不要贪多。
网友评论