为什么我在 Angular 6 中的服务出现错误？答案

【问题标题】：Why I get error at my service in Angular 6?为什么我在 Angular 6 中的服务出现错误？
【发布时间】：2019-02-06 10:26:26
【问题描述】：

我有一个服务：

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 不是函数在 SafeSubscriber.schedulerFn [as _next] (core.js:3565) 在 SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:195) 在 SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:133) 在 Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77) 在 Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54) 在 EventEmitter.push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next (Subject.js:47) 在 EventEmitter.push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit (core.js:3537) 在 PingOnActionListenerService.push../src/app/core/services/ping-on-action/ping-on-action-listener.service.ts.PingOnActionListenerService.removeListener（ping-on-action- listener.service.ts:19) 在 CatchSubscriber.selector (logging-interceptor.ts:45) 在 CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:33)

【问题讨论】：

你需要键入声明事件发射器，它可能不会解决问题，但你需要它
this.deactivatelistener() 返回未定义，因此您将通过 undefined 订阅
this._pingOnActionListenerService.removingListener.subscribe(this.deactivatelistener()); 你没有在这里调用函数removingListener。
@callback removingListener 不是一个函数，它是一个EventEmitter
也在subscribe(this.deactivatelistener()); .. 它应该是subscribe(this.deactivatelistener) 或subscribe(() => this.deactivatelistener());

标签： angular angular6

【解决方案1】：

虽然与 OP 的问题没有直接关系，但我发布此内容以防对其他人有所帮助。

错误generatorOrNext is not a function，可能是由于执行类似于下面的操作而导致的，其中没有传递给.subscribe() 的回调。

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

【讨论】：

这不是很标准的做法吗？有些人使用点击来获得副作用，而不是在订阅中做任何事情

【解决方案2】：

你不应该在服务中使用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。

【讨论】：

私人订阅：订阅； ngOnInit() { this.subscription = this._pingOnActionListenerService.removeListener$.subscribe(() => { this.deactivatelistener(); }); } ngOnDestroy() { this.subscription.unsubscribe(); }