Angular基础教程+Demo项目——尽可能全面一些——第二节

一、前言

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也算是非常详细的展示了他们的执行顺序以及触发条件，这里讲详细讲解一下其中重点的生命周期函数

1. constructor()： 构造方法，一般在其中引入一些服务或者进行局部数据的初始化
2. ngOnInit()： 一般请求数据是放到这里边的，然后存储到类数据中，对页面进行渲染
3. ngAfterViewInit()：这个是在页面和组件加载完成后才会触发的生命周期函数，一般是进行一些dom操作的
4. ngOnDestroy()：销毁方法，一般是在组件被注销或者路由到其他组件时触发，可以进行一些保存数据的操作，防止数据丢失

基本上，上面四个函数就够用了，其他的可以有个印象就足够了，项目中真的用到了也可以随时查看官网的文档，很方便的。

三、Rxjs 异步调用

本人使用的比较浅显，感觉这个rxjs第三方包主要对异步调用提供了更加完善的支持。rxjs本来是第三方包，但是在Angular7之后就被集成到了Angular中了，基于这个情况，直接使用就可以了

直接上Demo，根据Demo进行解释这个功能点的含义
Service服务

import {
    Injectable } from '@angular/core'