Question

我想与rxjs5一起运行this example。但它不起作用。我一直坚持#41 line。它表示地图返回Subject，并且它没有.takeUntil方法。实施它的最佳方法是什么？感谢

Answer 1

你的例子真的很旧，它使用了很久以前被弃用和删除的toRx()之类的东西。该示例还使用了EventEmitters并订阅了它们，我们should't do that并且还使用nativeElement和我们shouldn't do that either为DOM设置了值。

所以我稍微修改了一下这个例子

我删除了EventEmitter并将其替换为Subject
删除toRx()，不再需要
使用渲染器设置元素的cursor和position。

这是现在代码看起来像什么的一小部分，它没有那么不同。

  constructor(public element: ElementRef, public renderer: Renderer) {
    this.renderer.setElementStyle(element.nativeElement, 'position', 'relative');
    this.renderer.setElementStyle(element.nativeElement, 'cursor', 'pointer');

    this.mousedrag = this.mousedown.map(event => {
        event.preventDefault();
        return {
          left: event.clientX - this.element.nativeElement.getBoundingClientRect().left,
          top:  event.clientY - this.element.nativeElement.getBoundingClientRect().top
        };
      })
      .flatMap(imageOffset => this.mousemove.map(pos => ({
        top:  pos.clientY - imageOffset.top,
        left: pos.clientX - imageOffset.left
      }))
      .takeUntil(this.mouseup));

  }

这是full example工作。

Answer 2

从您的回购中看起来您使用的是旧版Angular2 packages 但是你可以试试这个，或者 Eric Martinez 为你提供了精彩的工作演示。

导入＆＃39; rxjs / Rx＆＃39;;

将主题转换为可观察对象

2 个答案: