angular - rxjs observable.interval();在浏览器中抛出不是函数异常

Question

下面给出了 component.ts 文件。为什么即使从 rxjs/add/observable/interval 导入间隔后它也会抛出错误。

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }
  ngOnInit() {
      const myNumber = Observable.interval(1000);
      myNumber.subscribe(
        (number: number) => {
          console.log(number);
        }
      );
  }
}

浏览器中的错误消息:

ERROR TypeError: rxjs_Observable__WEBPACK_IMPORTED_MODULE_2__.Observable.interval is not a function at HomeComponent.push../src/app/home/home.component.ts.HomeComponent.ngOnInit (home.component.ts:15) at checkAndUpdateDirectiveInline (core.js:20665) at checkAndUpdateNodeInline (core.js:21929) at checkAndUpdateNode (core.js:21891) at debugCheckAndUpdateNode (core.js:22525) at debugCheckDirectivesFn (core.js:22485) at Object.eval [as updateDirectives] (HomeComponent_Host.ngfactory.js? [sm]:1) at Object.debugUpdateDirectives [as updateDirectives] (core.js:22477) at checkAndUpdateView (core.js:21873) at callViewAction (core.js:22114) View_HomeComponent_Host_0 @ HomeComponent_Host.ngfactory.js? [sm]:1 proxyClass @ compiler.js:17945 push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:22729 push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:14645 (anonymous) @ core.js:16895 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138 push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:16115 push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:16895 (anonymous) @ core.js:16779 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388 onInvoke @ core.js:16156 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138 push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:16070 next @ core.js:16779 schedulerFn @ core.js:12609 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.tryOrUnsub @ Subscriber.js:196 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:134 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54 push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47 push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:12593 checkStable @ core.js:16125 onHasTask @ core.js:16169 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:441 push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:461 push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:285 push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:205 drainMicroTaskQueue @ zone.js:595 Promise.then (async) scheduleMicroTask @ zone.js:578 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410 push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232 push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252 scheduleResolveOrReject @ zone.js:862 ZoneAwarePromise.then @ zone.js:962 push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:16660 ./src/main.ts @ main.ts:11 __webpack_require @ bootstrap:78 0 @ main.ts:12 webpack_require @ bootstrap:78 checkDeferredModules @ bootstrap:45 webpackJsonpCallback @ bootstrap:32 (anonymous) @ main.js:1 HomeComponent_Host.ngfactory.js? [sm]:1 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 0, nodeDef: {…}, elDef: {…}, elView: {…}} View_HomeComponent_Host_0 @ HomeComponent_Host.ngfactory.js? [sm]:1 proxyClass @ compiler.js:17945 push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:22729 push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:14650 (anonymous) @ core.js:16895 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138 push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:16115 push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:16895 (anonymous) @ core.js:16779 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388 onInvoke @ core.js:16156 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138 push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:16070 next @ core.js:16779 schedulerFn @ core.js:12609 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.tryOrUnsub @ Subscriber.js:196 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:134 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54 push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47 push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:12593 checkStable @ core.js:16125 onHasTask @ core.js:16169 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:441 push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:461 push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:285 push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:205 drainMicroTaskQueue @ zone.js:595 Promise.then (async) scheduleMicroTask @ zone.js:578 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410 push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232 push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252 scheduleResolveOrReject @ zone.js:862 ZoneAwarePromise.then @ zone.js:962 push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:16660 ./src/main.ts @ main.ts:11 __webpack_require @ bootstrap:78 0 @ main.ts:12 webpack_require @ bootstrap:78 checkDeferredModules @ bootstrap:45 webpackJsonpCallback @ bootstrap:32 (anonymous) @ main.js:1

Answer 1

试试这个:

import { Component, OnInit } from '@angular/core';
import { interval } from 'rxjs';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }
  ngOnInit() {
      const myNumber = interval(1000);
      myNumber.subscribe(
        (number: number) => {
          console.log(number);
        }
      );
  }
}