rxjs创建操作符
一 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);
});
}
}