Angular 6中如何导入RxJS timer？导入尝试失败求助

嘿，我来帮你搞定这个RxJS timer的问题！你踩的这个坑其实是RxJS版本升级带来的变化——Angular 6配套的是RxJS 6，这个版本对导入方式做了大调整，之前RxJS 5的写法自然就不管用啦，我给你拆解下原因和正确的做法：

为什么你之前的两种写法都失效了？ #

• 第一种写法 import { timer } from 'rxjs/observable/timer';：这是RxJS 5的导入路径，RxJS 6已经把所有核心可观察对象（比如timer、interval这些）移到了RxJS的顶层目录，不再放在observable子目录下，所以这个导入路径找不到对应的模块。
• 第二种写法 Rx.Observable.timer(200, 100)：这种全局Rx对象的调用方式在RxJS 6里已经被废弃，而且如果你没有正确导入并暴露全局对象的话，代码根本识别不了Rx这个变量。

正确的使用姿势（RxJS 6+） #

1. 正确导入timer #

直接从rxjs顶层导入：

import { timer } from 'rxjs';

2. 调用timer并使用 #

导入后直接调用timer()即可，不需要再通过Observable对象。举个完整的Angular组件例子：

import { Component, OnInit } from '@angular/core';
import { timer } from 'rxjs';
import { take } from 'rxjs/operators'; // 如果需要用操作符，要从rxjs/operators导入

@Component({
  selector: 'app-timer-demo',
  template: `当前计数：{{ currentCount }}`
})
export class TimerDemoComponent implements OnInit {
  currentCount = 0;

  ngOnInit(): void {
    // 200ms后开始发射值，之后每100ms发射一次递增的数字
    timer(200, 100)
      .pipe(take(15)) // 只取前15次发射，避免组件销毁后还在运行
      .subscribe(count => {
        this.currentCount = count;
        console.log('当前值：', count);
      });
  }
}

额外说明：关于操作符 #

RxJS 6不仅改了可观察对象的导入方式，操作符也改成了从rxjs/operators导入，并且需要用pipe()方法来串联操作符（比如上面的take），这和RxJS 5里直接链式调用操作符的写法也不一样哦。

如果实在不想改旧代码，也可以安装rxjs-compat兼容包来支持RxJS 5的写法，但不推荐长期使用，毕竟兼容包只是过渡方案，还是建议直接适配RxJS 6的新写法~

内容的提问来源于stack exchange，提问作者anonymous