angular——生命周期函数和Rxjs基础

一.生命周期函数

1.定义
生命周期函数是在angular组件创建、更新、销毁的时候会触发的一系列方法

2.常用的生命周期函数
按调用顺序如下

  • constructor
    构造函数,除了使用简单的值对局部变量进行初始化之外,什么都不应该做,比如初始化服务对象。(非生命周期函数)

  • ngOnInit()
    组件的初始化方法,只调用一次

  • ngAfterViewInit()
    初始化完组件视图及其子视图之后调用,只调用一次。一般在此视图中进行dom操作

  • ngOnDestroy()
    销毁指令/组件之前调用

二.Rxjs

RxJS 是一个库,它通过使用 observable 序列来编写异步和基于事件的程序
简单示例
1.创建服务request

import { Observable } from 'rxjs';

  // 定义一个方法,返回Observable对象,创建对象时传入一个延时函数
  getRxjsInternalNum(){
    return new Observable<any>((observer)=>{
      let count=0;
      setInterval(()=>{
        count++;
        observer.next(count);
      },1000)
    })
  }

2.组件中调用服务中定义的方法

import { filter,map} from 'rxjs/operators';

  constructor(private request: RequestService) { }

  ngOnInit() {
    let data=this.request.getRxjsInternalNum();
    data.pipe(
      filter((value)=>{
        if(value%2==0){
          return true;
        }
      }),
      map((value)=>{
        return value*value
      })
    ).subscribe((value)=>{
      console.log(value);
    });
  }

参考:https://www.bilibili.com/video/av59049211?from=search&seid=485997827014437418

发布了106 篇原创文章 · 获赞 8 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/weixin_43667990/article/details/104084409