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环境)的主要内容,如果未能解决你的问题,请参考以下文章