一、前言
Angular是一个类似于后端开发模式的前端开发框架,学习起来非常简单,当然需要一定的前端基础,本篇接着第一节继续介绍Angular基础
学习过程中所写的Demo_GitHub——学习Angular——浅度学习Demo
官网:https://angular.cn/(官网是最好的老师哦,追求技术的大神可以继续深入啦)
二、声明周期函数
当 Angular 实例化组件类并渲染组件视图及其子视图时,组件实例的生命周期就开始了。生命周期一直伴随着变更检测,Angular 会检查数据绑定属性何时发生变化,并按需更新视图和组件实例。当 Angular 销毁组件实例并从 DOM 中移除它渲染的模板时,生命周期就结束了。当 Angular 在执行过程中创建、更新和销毁实例时,指令就有了类似的生命周期。
说得简单点,就是在创建-销毁组件的过程中,有一系列的方法会被默认执行
这部分知识点可以参考官网
根据习惯还是先看案例,再详细讲解:
子组件:
HTML
<h1>lifecycle-method works!</h1>
<h2 #count ></h2>
<button (click)="countOperation()">累加</button>
<hr>
<br>
<hr>
<br>
TS文件
import {
AfterContentChecked,
AfterContentInit,
AfterViewChecked,
AfterViewInit,
Component,
DoCheck,
OnChanges,
OnDestroy,
OnInit,
ViewChild,
Input
} from '@angular/core';
// tslint:disable-next-line:no-conflicting-lifecycle
@Component({
selector: 'app-lifecycle-method',
templateUrl: './lifecycle-method.component.html',
styleUrls: ['./lifecycle-method.component.scss']
})
export class LifecycleMethodComponent implements OnInit, OnChanges, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit,
AfterViewChecked, OnDestroy{
@Input() childData: any;
num = 0;
@ViewChild('count') count: any;
// 构造方法
constructor() {
console.log('000 构造方法被执行---除了对局部变量的初始化,不应该进行其他操作(重点)');
}
ngOnChanges(): void{
// 此组件作为子组件,被父组件传值的时候才会被调用,并且每次父组件传值过来时都会被调用,这里就不写例子了,很好理解
console.log('001 ngOnChanges()被调用---当被绑定输入属性的值发生变化时被调用,一般为父子组件传值');
}
ngOnInit(): void {
console.log('002 ngOnInit()被调用---请求数据一般被放到这里(重点)');
}
ngDoCheck(): void{
console.log('003 ngDoCheck()被调用---检测,并在发生 Angular 无法或不愿意自己检测的变化时作出反应');
}
ngAfterContentInit(): void{
console.log('004 ngAfterContentInit()被调用---当 Angular 把外部内容投影进组件视图或指令所在的视图之后调用。');
}
ngAfterContentChecked(): void{
console.log('005 ngAfterContentChecked()被调用---每当 Angular 检查完被投影到组件或指令中的内容之后调用。');
}
ngAfterViewInit(): void{
console.log('006 ngAfterViewInit()被调用---当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用,一般进行dom操作(重点)');
}
ngAfterViewChecked(): void{
console.log('007 ngAfterViewChecked()被调用---每当 Angular 做完组件视图和子视图或包含该指令的视图的变更检测之后调用。');
}
ngOnDestroy(): void{
console.log('008 ngOnDestroy()被调用---每当 Angular 每次销毁指令/组件之前调用并清扫,当组件进行路由时会触发此声明周期函数(重点)');
}
countOperation(): void{
this.num ++;
this.childData ++;
this.count.nativeElement.innerHTML = this.num;
}
}
父组件:
HTML
<app-lifecycle-method *ngIf="exist" [childData]="title"></app-lifecycle-method>
<button (click)="changeTitle()">触发ngOnChanges()</button>
<button (click)="destroy()">触发ngOnDestroy()</button>
TS文件
// 引入核心模块中的Component
import {
Component } from '@angular/core';
@Component({
selector: 'app-root', // 组件的名字
templateUrl: './app.component.html', // Html
styleUrls: ['./app.component.scss'] // css
})
export class AppComponent {
title = 'demo1'; // 定义属性
exist: any = true;
constructor(){
// 构造函数
}
changeTitle(): void{
this.title = this.title + '1';
}
destroy(): void{
this.exist = !this.exist;
}
}
先提一下,不知道我又没有在第一节讲,不过我们使用哪个组件,一个很关键的操作就是将它加入到index.html页面中,因为Angular是单页面应用,也就是说它只会显示index.html,所以只有加入到index.html的视图才会被显示
说到生命周期函数,Angular一共有8个加上构造方法,上面的Demo也算是非常详细的展示了他们的执行顺序以及触发条件,这里讲详细讲解一下其中重点的生命周期函数
- constructor(): 构造方法,一般在其中引入一些服务或者进行局部数据的初始化
- ngOnInit(): 一般请求数据是放到这里边的,然后存储到类数据中,对页面进行渲染
- ngAfterViewInit():这个是在页面和组件加载完成后才会触发的生命周期函数,一般是进行一些dom操作的
- ngOnDestroy():销毁方法,一般是在组件被注销或者路由到其他组件时触发,可以进行一些保存数据的操作,防止数据丢失
基本上,上面四个函数就够用了,其他的可以有个印象就足够了,项目中真的用到了也可以随时查看官网的文档,很方便的。
三、Rxjs 异步调用
本人使用的比较浅显,感觉这个rxjs第三方包主要对异步调用提供了更加完善的支持。rxjs本来是第三方包,但是在Angular7之后就被集成到了Angular中了,基于这个情况,直接使用就可以了
直接上Demo,根据Demo进行解释这个功能点的含义
Service服务
import {
Injectable } from '@angular/core'