Question

我使用Angular CLI v1.1.3和Node v6.11.0创建了一个新的Angular2项目。我想使用rxjs v5.4.2（由角度CLI自动安装）创建一个简单的rxjs示例。

以下是我的App.component.ts文件及其代码：

import { Component } from '@angular/core';
import { Observable} from 'rxjs/observable'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private obs: Observable) {
    obs.fromEvent(document, 'click')
      .filter(function(c) {return c.clientX > window.innerWidth / 2 })
      .take(10)
      .suscribe(function(c) {console.log(c.clientX, c.clientY) })
  }
}

这是我收到的错误讯息：

ERROR in .../src/app/app.component.ts (11,28): Generic type 'Observable<T>' requires 1 type argument(s).

问：如何使用rxjs正确运行此示例？

该示例建议使用

Rx.Observable.fromEvent(document, 'click')
          .filter(function(c) {return c.clientX > window.innerWidth / 2 })
          .take(10)
          .suscribe(function(c) {console.log(c.clientX, c.clientY) })

如何使用Rx.来运行示例？

编辑2： 修复了rxjs问题，但现在c.clientX和c.clientY不再工作了。当我将鼠标悬停在IDE中的clientX上时，它会告诉我Property clientX does not on type {}。

import { Component } from '@angular/core';
import { Observable} from 'rxjs/observable';
import { Operator } from 'rxjs/operator';

import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/take';
import 'rxjs/add/operator/filter';
import 'rxjs/add/observable/suscribe';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor() {
    Observable.fromEvent(document, 'click')
      .filter(function(c) {return c.clientX > window.innerWidth / 2 })
      .take(10)
      .subscribe(function(c) {console.log(c.clientX, c.clientY) })
  }
}

编辑：

在此处查看工作Plunkr。如果单击预览的右半部分，则会在控制台中打印电源线。它可以在线工作，但不能在我的本地机器上使用相同的代码......

Answer 1

您的构造函数声明参数obs为Observable类型。 Observable是generic type，这意味着它需要一个类型参数。

以这种方式思考：您希望obs成为某个＆＃34;的Observable＆＃34;，即包含某种类型的项目。

您需要撰写constructor(private obs: Observable<Something>)。

Answer 2

fromEvent()方法是一个静态方法，需要在Observable类上调用而不是在实例上：

Observable.fromEvent(document, 'click')

有关详细信息，请参阅：http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-fromEvent

所以问题实际上不在参数中，因为你不应该使用它:)。

在Angular2 CLI项目中使用rxjs的问题

2 个答案: