如何用angular2和angular rxjs观察鼠标移动

Question

我有以下内容:

angular2(NameCmp)

import {
    OnInit, Component, ChangeDetectionStrategy, ViewChild, ElementRef,
    AfterViewInit
} from 'angular2/core'
import {Observable} from 'rxjs/Observable';

..
export class NameCmp implements AfterViewInit{
....
  @ViewChild('card')
  card: ElementRef;
  mouseMoves$: Observable<MouseEvent>;

  ngAfterViewInit(): void {
  this.mouseMoves$ = Observable.fromEvent(this.card.nativeElement, 'mousemove');

    this.mouseMoves$.subscribe( event => console.log('logging mousemove'));

  console.log('after view init')
}

html的

...
<md-card #card>
  <md-card-content>
    <md-input
        required
        placeholder = "Title"
        [ngFormControl] = "titleCtrl"></md-input>
  </md-card-content>
</md-card>

但是,虽然console.log('after view init')打印到控制台,但console.log('logging mousemove'));声明却没有.

谢谢

Answer 1

你的代码很好,你只需要导入 fromEvent

import "rxjs/add/observable/fromEvent";

或Observable从中导入Rx

import {Observable} from 'rxjs/Rx';

检查这个插头

更新 以获取引用组件的nativeElement的引用.例如,获取nativeElement md-card,你需要将对象传递{read:ElementRef}给ViewChild()

@ViewChild('card', {read: ElementRef})

检查这个插头