angular - 如何使用 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})

检查这个笨蛋