任何Angular 2应用程序的核心理念是组件。实际上，整个应用程序可以被建模为这些组件的树。
组件控制一个屏幕空间的补丁，我们可以调用视图，并为应用程序声明可重用的UI构建块。
基本上，组件是最终用户可见的任何东西，并且可以在应用程序中重复使用多次。
在Angular1.x中，我们有路由器视图和指令，其工作类似于组件。指令组件的想法变得相当受欢迎。它们是通过使用控制器的指令创建的，同时依赖于controllerAs和bindToController属性。例如：
angular.module('ngcourse')
.directive('ngcHelloComponent', () => ({
restrict: 'E',
scope: { name: '=' },
template: '<span>Hello, {{ ctrl.name }}.</span>',
controller: MyComponentCtrl,
controllerAs: 'ctrl',
bindToController: true
})
);
事实上，这个概念变得如此受欢迎，在Angular 1.5中，.component方法被引入作为语法糖。
angular.module('ngcourse')
.component('ngcHelloComponent', {
bindings: { name: '=' },
template: '<span>Hello, {{ $ctrl.name }}.</span>',
controller: MyComponentCtrl
});
创建组件需要三步：
- 从 @angular/core 引入 Component 装饰器
- 创建一个类，并用 @Component 修饰
- 在 @Component 中 ，设置selector、template 和 styles 等元数据
import {Component} from '@angular/core';
@Component({
selector: 'hello',
template: '<p>Hello, {{name}}</p>'
})
export class Hello {
name: string;
constructor() {
this.name = 'World';
}
}
- selector （选择器）：我们用它来告诉Angular创建和插入这个组件实例的元素属性。
- template （模板）：HTML的一种形式，它告诉Angular如何呈现这个组件。下面的组件会将name变量的值插入到双括号
{{name}}之间的模板中，在视图中呈现的是<p>Hello World</p>。
要使用这个组件，我们只需添加``到我们的HTML，Angular将插入这些标签之间的视图的实例。查看示例