作者:心叶
时间: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
    }

}

本文固定链接: http://www.js-code.com/angularjs/angularjs_28373.html