angular4.x学习笔记 --组件以及生命周期

组件

自从采用组件化的React大火之后，目前市面上炙手可热的框架全都采用了组件化的理念，Angular当然也不能落后了。可以说，组件化是Angular的核心理念。按Angular在中国的布道者大漠穷秋的话来说，就是：

Angular的核心概念是组件，模块化机制NgModule是为组件化服务的，实际上所有其它机制都是围绕组件化而来的。只有从组件化这个角度才能把握Angular的精神内核。

组件通常都是由模版和业务逻辑组成，看一下如何用Angular写一个很简单的组件：

// hello.component.ts

import { Component } from '@angular/core';

@Component({              
    selector: 'hello',
    template: '<p> {{greeting}} </p>',
    styles: [`p { color: red;}`]
})
export class HelloComponent{
    private greeting: string;
    constructor(){
        this.greeting = 'Hello, Angular2!';
    }
}

// 使用
<hello></hello>

// 渲染结果
<hello>
    <p> Hello, Angular2! </p> 
</hello>

定义类HelloComponent的时候，加上装饰器@Component（Typescript语法），告诉Angular这个类是组件类。里面的数据称之为元数据（metadata），selector属性说明了该组件对外的使用标记，template就是组件的模版，styles是组件的样式。而HelloComponent中定义的就是该组件的业务逻辑了。

如果模版内容太多，可以单独写在一个html文件中，用templateUrl属性引入；同理，样式文件用styleUrls引入。

 

组件生命周期

正如其他框架的组件，Angular的组件也是有生命周期这个概念。在不同的阶段不同的场景下，可以调用不同的生命周期函数钩子（hook）。

 

• constructor：构造器函数，一般用于注入服务
• ngOnChanges：检测到输入数据变化，首次触发发生在ngOnInit前。注意对象的属性发生变化时监听不到
• ngOnInit：组件初始化，通常会设置一些初始值
• ngDoCheck：手动触发更新检查
  • ngAfterContentInit：内容初始化到组件之后
  • ngAfterContentChecked：内容变更检测之后
  • ngAfterViewInit：视图 初始化之后
  • ngAfterViewChecked：视图发生变化检测之后，这个可以用来保证用户视图的及时更新
• ngOnDestroy：组件注销时的清理工作，通常用于移除事件监听，退订可观察对象等

 

---

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！