组件通常控制着视图中的一块区域。
一个大型应用都是由小型、独立和可复用的组件构成。
本质上,组件是一个带有 @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