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

小咪咪 2022-05-28 01:13 419阅读 0赞

## 组件 ##

自从采用组件化的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：组件注销时的清理工作，通常用于移除事件监听，退订可观察对象等

--------------------

![20191229112121499.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[20191229112121499.png]: /images/20220528/63ec99f759674b928f8260eee46e3e9d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220528/adf37a470fb74898bc6b93ffbffa92b2.png