作者：心叶
时间：2018-07-24 16:41

基本说明

组件是Angular中非常重要的一个东西，是拥有模板的指令，是构成Angular应用的基础和核心，被用来包装特定的功能，应用程序的有序运行依赖于组件之间的协同工作。

自定义组件

假如现在有一列数据，需要使用ul和li标签显示出来，可以自定义一个名称为ui-show标签，组件代码如下（代码位于show.component.ts）：

import { Component } from '@angular/core';@Component({selector: 'ui-show',template: '<ul><li *ngFor="let row of dataList">ID:{{row.id}}  INFO:{{row.info}}</li></ul>',styles: [`ul{background-color: antiquewhite;padding-left: 10px;list-style: none;}`]})
export class ShowComponent {dataList = [{ id: 1, info: "Angular" },{ id: 2, info: "React" },{ id: 3, info: "Vue" }];}

此时，组件已经定义完成，为了可以使用，你需要在模块（比如根模块app.module.ts）中引入，如下（去掉了一些不需要说明的代码）：

import { NgModule } from '@angular/core';import { ShowComponent } from './show.component';@NgModule({declarations: [ShowComponent]})
......

现在，你可以使用标签ui-show来显示那些数据了。

template和templateUrl选项

html模板除了上面例子中直接写在组件文件中，还可以这样：

templateUrl:'./show.component.html'

这样，具体的模板在.html文件中开发，更容易维护，如果模板比较复杂的话。

styles和styleUrls选项

样式文件也一样，除了上面使用styles选项直接写在组件文件中以外，还可以这样：

styleUrls:['./show.component.css']

这样，在.css文件中开发样式就比较容易书写了。

上面三个是常见的选项，比较简单也比较常用，除此之外，还有很多选项可以选择，后续再说明。

生命周期钩子

组件（当然包括指令）的实例有一个生命周期，Angular提供了钩子可以让开发者在需要的时期触发预先定义的方法，称为 生命周期钩子接口。下面展示了这些钩子的顺序：

需要注意的是，你不需要全部实现这些钩子的方法，而且这些钩子也不是总有效，有的只有在组件中定义才有意义。

如何使用？

比如要使用ngOnInit()这个钩子，在初始化的时候处理一些东西，可以这样：

......export class ShowComponent implements OnInit{......ngOnInit() {//todo}}