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);
});
}
}
