zoukankan      html  css  js  c++  java
  • 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);
        });
    
      }
    
    }

  • 相关阅读:
    面向对象编程
    多任务-线程
    浅析IoC框架
    Android:关于声明文件中android:process属性说明
    Android闹钟设置的解决方案
    【转】RelativeLayout和LinearLayout及FrameLayout性能分析
    SurfaceView浅析
    SQLite Vacuum
    SQLiteStatement优化SQLite操作
    基于Android SQLite的升级详解
  • 原文地址:https://www.cnblogs.com/sea-breeze/p/8968724.html
Copyright © 2011-2022 走看看