Angular2.0快速上手（三）

各位小伙伴久等了，上一节我们一起简单的了解了angular2的目录结构，最后简单的尝试了一下双向数据绑定。今天我们继续一起学习插值表达式、双向数据绑定和事件绑定。

1、好不好，看疗效

今天就不重新创建项目了，直接将上一节的hello-world项目修改一下。首先看一下两张效果图：

效果1

效果2

今天实现的例子是比较简单的，不过有几个重要的知识点需要掌握。下面我们先看代码。

app.component.html

  {{title}}

My favorite hero is:{{myHero}}

user name

msg 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：看起来东西是比较简单，其实有很多知识点是可以讲的，但是又怕一下子讲的太多让小伙伴们迷糊了，所以先讲这么多啦。不要贪多。