【问题标题】:Cannot import Observable.fromEvent - RXJS无法导入 Observable.fromEvent - RXJS
【发布时间】:2018-10-25 14:31:26
【问题描述】:

我正在尝试从输入事件创建一个 Observable。我已经尝试了几乎所有方法,但无法导入“fromEvent”。这是我的代码。我正在使用角度 6.0.1 和 RXJS 6.1.0

错误 TS2339:“typeof Observable”类型上不存在属性“fromEvent”。

import { Directive, EventEmitter, Input, Output, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { NgControl } from '@angular/forms';
import { distinctUntilChanged } from 'rxjs/internal/operators/distinctUntilChanged';
import { debounceTime } from 'rxjs/internal/operators/debounceTime';
import { map } from 'rxjs/internal/operators/map';
import { filter } from 'rxjs/internal/operators/filter';
import { Observable } from 'rxjs/internal/Observable';
//import 'rxjs/internal/observable/fromEvent';
//import 'rxjs/add/observable/fromEvent';

@Directive({
  selector: '[ngModel][debounceTime]'
})
export class InputDebounceDirective implements AfterViewInit {

  @Output()
  public onDebounce = new EventEmitter<any>();

  @Input('debounceTime')
  public debounceTime: number = 1500;

  constructor(private elementRef: ElementRef, private currentModel: NgControl) { }

  ngAfterViewInit() {
    Observable.fromEvent(this.elementRef.nativeElement, 'keyup')
      .pipe(
        debounceTime(this.debounceTime),
        distinctUntilChanged()
      )
      .subscribe(x => {
        this.onDebounce.emit(x);
      });

  }

}

【问题讨论】:

    标签: angular rxjs angular6


    【解决方案1】:

    你必须在RxJS6中导入fromEvent,如下:

    import {fromEvent} from 'rxjs';
    

    阅读migration guide 了解更多信息,尤其是查看import paths 部分。

    使用fromEvent时,将其作为函数使用如下:

    fromEvent(this.elementRef.nativeElement, 'keyup')
    

    不作为静态方法如下(这在之前的 RxJS 版本中是正确的)

    Observable.fromEvent(this.elementRef.nativeElement, 'keyup')
    

    【讨论】:

    • 您好,感谢您的帮助,但错误仍然存​​在:(
    • @avechuche 另外,您不应该从internal 导入任何内容(在任何rxjs 版本中)。作为 V6,从 rxjs/operators 导入运算符,例如:import { filter } from 'rxjs/operators
    • @developer033 你为什么推荐这个?对我来说,这有助于您的捆绑器不包含死亡代码。但我可能不会因某些限制而奖励。
    猜你喜欢
    • 2021-11-01
    • 1970-01-01
    • 2016-11-27
    • 2016-03-27
    • 2018-09-23
    • 1970-01-01
    • 2018-10-27
    • 2019-10-01
    • 2017-04-06
    相关资源
    最近更新 更多