Rxjs之创建操作符(Angular环境)

Posted 沙滩海风

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Rxjs之创建操作符(Angular环境)相关的知识,希望对你有一定的参考价值。

一 of操作符

import { Component, OnInit } from \'@angular/core\';
import { of } from \'rxjs/observable/of\';
import { Observable } from \'rxjs/Observable\';

@Component({
  selector: \'app-create\',
  templateUrl: \'./create.component.html\',
  styleUrls: [\'./create.component.css\']
})
export class CreateComponent implements OnInit {

  constructor() { }

  ngOnInit() {

    // 从数组创建

    const arr = [\'red\', \'yellow\', \'blue\'];
    const colors: Observable<string[]> = of(arr);
    colors.subscribe((colorsArr: string[]) => {
      console.log(colorsArr);
    });

    // 从迭代器对象创建

    const map: Map<string, any> = new Map();
    map.set(\'fruit\', \'orange\');
    of(map).subscribe(
      (fruitsMap: Map<string, any>) => {
        console.log(fruitsMap);
      }
    );
  }

}

 

 

二 from操作符

import { Component, OnInit } from \'@angular/core\';
import { from } from \'rxjs/observable/from\';
import { Observable } from \'rxjs/Observable\';

@Component({
  selector: \'app-create\',
  templateUrl: \'./create.component.html\',
  styleUrls: [\'./create.component.css\']
})
export class CreateComponent implements OnInit {

  constructor() { }

  ngOnInit() {

    // 从数组创建

    const arr = [\'red\', \'yellow\', \'blue\'];
    const colors: Observable<string> = from(arr);
    colors.subscribe((color: string) => {
      console.log(color);
    });

  }

}

 

 

三 interval操作符

返回从0开始的无限自增整数序列,每个固定的时间间隔发送。第一次并 没有立马去发送, 而是第一个时间段过后才发出。

import { Component, OnInit } from \'@angular/core\';
import { interval } from \'rxjs/observable/interval\';
import { Observable } from \'rxjs/Observable\';

@Component({
  selector: \'app-create\',
  templateUrl: \'./create.component.html\',
  styleUrls: [\'./create.component.css\']
})
export class CreateComponent implements OnInit {

  constructor() { }

  ngOnInit() {

    interval(1000).subscribe((val: number) => {
      console.log(val);
    });

  }

}

 

四 range操作符

range 操作符顺序发出一个区间范围内的连续整数, 你可以决定区间的开始和长度。

import { Component, OnInit } from \'@angular/core\';
import { range } from \'rxjs/observable/range\';
import { Observable } from \'rxjs/Observable\';

@Component({
  selector: \'app-create\',
  templateUrl: \'./create.component.html\',
  styleUrls: [\'./create.component.css\']
})
export class CreateComponent implements OnInit {

  constructor() { }

  ngOnInit() {

    range(600, 10).subscribe((val: number) => {
      console.log(val);
    });

  }

}

 

以上是关于Rxjs之创建操作符(Angular环境)的主要内容,如果未能解决你的问题,请参考以下文章

RxJS之转化操作符 ( Angular环境 )

RxJS之过滤操作符 ( Angular环境 )

Angular之Rxjs基础操作

在 Angular 10 和 RxJs 中调用了错误的动作类型或错误的减速器

使用 Rxjs 构建 Angular Store

Angular使用总结 --- 搜索场景中使用rxjs的操作符