Angular系列学习二：基本的组件说明、自定义组件和部分细节说明

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

基本说明

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

自定义组件

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

import { Component } from '@angular/core';
            
@Component({
            
    selector: 'ui-show',
            
    template: '
ID:{{row.id}}  INFO:{{row.info}}
',
            
    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
    }

}