组件

组件的意义

组件通常控制着视图中的一块区域。
一个大型应用都是由小型、独立和可复用的组件构成。
本质上，组件是一个带有 @Component 装饰器的类。

组件的结构

import { Component, OnInit } from '@angular/core';
import { APIService } from './common/service/api.service';

@Component({
  // 组件选择器，当在模板中使用该标签时，就会把该组件加载到那里
  selector: 'app-root',

  // 引入组件 html 模板
  templateUrl: './app.component.html',

  // 引入组件 css 文件(可引入多个)
  styleUrls: ['./app.component.scss'],

  // 用于向本组件提供服务，会与组件一同创建和销毁
  // 如果组件所在的模块中已经注入该服务，则可以省略
  providers:[ APIService ]
})

// 为模板提供数据和方法支持
export class AppComponent implements OnInit {

  // 构造函数，通常在这里创建服务实例
  constructor() {
    private api: APIService
  }
  
  // 生命周期函数
  ngOnInit(){ }

}

组件的使用

组件必须在模块中声明之后，且只能声明一次，才可以正常使用。

@NgModule({
  declarations: [ AppComponent ]
})

组件的生命周期

一个组件创建、更新和销毁实例的过程就叫做组件的生命周期。
组件的生命周期大体可以分为两种，一种是组件由创建到销毁实例的过程：

另外一种是组件更新实例的过程：

图中罗列的 ngOnChanges、ngOnInit 等等叫做钩子函数，这些函数是已经定义好的，允许开发人员在某个阶段对实例对象进行操作。

钩子函数的使用

例子：

// 导入生命周期接口
import { Component, OnInit, OnChanges, OnDestroy } from '@angular/core';

@Component({
  selector: 'talent-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.scss'],
})

// 实现生命周期接口
export class WelcomeComponent implements OnInit, OnChanges, OnDestroy {

  constructor() { }

  // ng + OnInit 使用钩子函数
  ngOnInit(): void {}
  
  // ng + OnChanges 使用钩子函数
  ngOnChanges(): void {}
  
  // ng + OnDestroy 使用钩子函数
  ngOnDestroy(): void {}

}

常用钩子函数

constructor()

constructor() 并非是钩子函数，但却是在所有钩子函数之前被调用，主要用于将服务注入到组件中，也可以执行简单的数据初始化。

例子：

constructor(
    private router: Router,
    private query: WelcomeService,
  ) { }

ngOnChanges()

当组件的输入属性发生变化，就会调用 ngOnChanges() 方法，该方法接受当前和上一属性值的 SimpleChanges 对象。
ngOnChanges() 方法发生的非常频繁，所以需要注意性能问题。

例子：

// 需要导入 SimpleChanges 对象
// import { SimpleChanges } from '@angular/core';

@Input() videoStop: boolean;

ngOnChanges(changes: SimpleChanges): void {
  console.log(changes.videoStop.currentValue);
  console.log(changes.videoStop.previousValue);
}

ngOnInit()

ngOnInit() 会在初始化组件的时候调用，发生在第一轮 ngOnChanges()
完成之后，且只调用一次。主要用处有两点：一是执行初始函数，二是获取初始数据。

例子：

personalName: string;
  
ngOnInit(): void {
  this.personalName = 'Tom';
  this.checkWeiChartLoginFn();
}

checkWeiChartLoginFn() {
  console.log('Welcome');
}

ngOnDestroy()

ngOnDestroy() 会在销毁组件之前调用，只调用一次，主要用于移除事件监听、清除定时器、退订 Observable 等。

例子：

ngOnDestroy(): void {
  this.subscription.unsubscribe();
  clearInterval(this.timer);
}

---

end