angular2:组件（Component）、模板（Template）和元数据（MetaData）

先看一个简单的组件：

// hello.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'say-hello',
    templateUrl: './hello.component.html',
    styleUrls: [ './hello.component.css' ]
})

export class HelloComponent{
    name: string = 'Angular2';
    constructor(){}
}

    hello,{{ name }}!

/* hello.component.css */
p{ margin:0; padding:0; font-size:14px; color: #444;}
p span{ font-size: 18px; }

组件（Component）

组件的作用是控制页面上的某一块区域，即视图。Angular在类中定义组件的应用逻辑，类又通过属性和方法与视图交互。

上面的代码使用@Component装饰器函数将后面定义的HelloComponent类标记为了一个组件，别忘了先要导入Component装饰器，否则无法使用。@Component装饰器函数接收一个元数据对象，其属性值定义了模板或模板路径、样式或样式路径以及css选择器（即自定义的标签）等内容。

模板（Template）

观察上面HTML文件的代码，除了标准的HTML标签外，可以看到还有一个Angular自有的取值表达式{{ name }}，这个表达式可以将类中定义的name值取过来显示在页面上。修改name值并保存，页面内容也会相应发生变化。这也是Angular的魅力所在——不用修改DOM就可操控页面内容。

除了使用{{}}以外，还可以使用*ngFor循环 (click) (keyup)事件 [staff]输入属性 [(ngModel)]双向数据绑定等模板语法。

元数据

@Component装饰器函数接收的参数就是元数据，元数据的作用是告诉Angular如何处理一个类。比如在父模板中用什么标签调用该组件实例，组件实例如何渲染页面等。

元数据有如下属性：

• selector: 选择器。
• template: 模板。值为模板字符串，为了提高可读性和复用性，通常不定义该属性，而是提取为单独的HTML文件。
• templateUrl: 模板文件相对路径。即上面说的HTML文件的相对路径。
• style: 样式。值为模板字符串组成的数组，为了提高可读性和复用性，通常不定义该属性，而是提取为单独的CSS文件。
• styleUrls: 样式文件相对路径数组。即上面说的CSS文件的相对路径所组成的数组。
• providers: 服务提供商。同模块中的providers。