为什么我的Angular 6服务出错？

Question

我有一个服务：

import { EventEmitter, Injectable } from '@angular/core';

@Injectable()
export class PingOnActionListenerService {
    removingListener = new EventEmitter();

    removeListener(): void {
        this.removingListener.emit();
    }

在组件A中，我调用了该服务：

this._pingOnActionListenerService.removeListener();

在组件 B 中，我希望监听该服务：

    ngOnInit() {
        this._pingOnActionListenerService.removingListener.subscribe(this.deactivatelistener());
    }

    deactivatelistener() {
        window.removeEventListener('click', this.pingIfLastPingIsOld);
    }

当我运行这段代码时，在控制台上会有一个错误信息:

core.js:1671 ERROR TypeError: generatorOrNext is not a function at SafeSubscriber.schedulerFn [as _next] (core.js:3565) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:195) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:133) at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77) at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54) at EventEmitter.push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next (Subject.js:47) at EventEmitter.push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit (core.js:3537) 在ping-on-action-listener.service.ts.PingOnActionListenerService.removeListener (ping-on-action-listener.service.ts:19) at CatchSubscriber.selector (logging-interceptor.ts:45) at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:33)

- Frank Mehlhop

---

你需要声明事件发射器，这可能不会解决问题，但你需要它。 - mast3rd3mon

this.deactivatelistener() 返回未定义，因此您正在将 undefined 传递给订阅。 - user184994

this._pingOnActionListenerService.removingListener.subscribe(this.deactivatelistener()); 这里你没有调用 removingListener 函数。 - callback

@callback removingListener 不是一个函数，而是一个 EventEmitter。 - user184994

在 subscribe(this.deactivatelistener()); 中，应该改为 subscribe(this.deactivatelistener) 或 subscribe(() => this.deactivatelistener())。 - callback

@callback someFn(this.cb) 的行为不如预期。如果 this.cb 在某种方式上引用了 this，那么它将不是你所说的 this.cb 所在的相同的 this。它将是最终调用回调函数的作用域。如果 this.cb 引用了 this，请使用第二个选项。 - RoboticRenaissance

Answer 1

虽然与OP的问题不直接相关，但是我发布这篇文章是为了帮助其他人。

错误 generatorOrNext is not a function 可能是由于类似以下代码的情况引起的，在这种情况下，没有回调函数传递给.subscribe()。

this.subject.valueChanges.subscribe(
    // (newVal) => console.log(newVal)
);

- derekbaker783

---

这不是一件很标准的事情吗？有些人使用tap来处理副作用，而不是在subscribe中执行任何操作。 - Ash McConnell

Answer 2

在Service中不应该使用EventEmitter，因为它只适用于组件绑定和@Output()。你应该重新设计为Subject/Observable：

export class PingOnActionListenerService {
  _removingListener = new BehaviorSubject<boolean>(false);

  removeListener(): void {
    this._removingListener.next(true);
  }

  get removeListener$(): Observable<boolean> {
    return this._removingListener.asObservable()
      .pipe(filter(val => val));
  }
}

在组件B中使用：

ngOnInit() {
  this._pingOnActionListenerService.removeListener$
   .subscribe(() => {
     this.deactivatelistener();
   });
}

不要忘记在组件的ngOnDestroy中取消订阅。

- PeS

---

私有订阅：Subscription;ngOnInit() { this.subscription = this._pingOnActionListenerService.removeListener$.subscribe(() => { this.deactivatelistener(); }); }ngOnDestroy() { this.subscription.unsubscribe(); } - Frank Mehlhop