javascript - 无法调用类型缺少调用签名的表达式。类型 'EventEmitter' 没有兼容的调用签名

Question

我正在尝试编写一个服务，其中通过其中的相应方法触发一些事件，以便我的应用程序中的任何组件都可以监听它。

因此，我在服务中创建了一个自定义事件，如下所示

export class EventsService {

@Output() expandNav: EventEmitter<Number> = new EventEmitter();

trigExpandNav() {
this.expandNav.emit(1);
}

constructor() { }
}

然后我将此服务作为提供程序包含在我的组件中，我想通过 trigExpandNav 方法发出此事件，如下所示:

import {
Component,
OnInit,
Output,
EventEmitter
} from '@angular/core';
import {
EventsService
} from '../../services/events.service';

@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css'],
providers: [EventsService]
})
export class HeaderComponent implements OnInit {

eventsService: EventsService;

fun() {
this.eventsService.trigExpandNav();
}

 constructor() {}

 ngOnInit() {}

 }

但我收到此错误

 ERROR in src/app/layout/header/header.component.ts(21,7): error TS2349: Cannot invoke an expression whose type lacks a call signature. Type 'EventEmitter<Number>' has no compatible call signatures.

我不知道我哪里做错了，所以请帮助并提前致谢。

重要

我想要实现的是:

假设我有 2 个组件。我想在单击按钮或链接时触发第一个组件的事件，并在 html 文件的第二个组件中监听该事件，如 sda

为此，我创建了一项服务，在其中通过方法发出事件。问题是它按预期工作。

Answer 1

您不应该为服务使用事件发射器，这对于 RxJS BehaviourSubject 或主题来说是一个更好的地方。根据您的需要。

@Ouput() 和 EventEmitters 仅适用于组件

所以你的服务应该是这样的:

export class EventsService {

   private expandNavSubject = new BehaviorSubject<number>(null);

   trigExpandNav() {
      this.expandNavSubject.next(1);
   }

   get expandNav$(){
     this.expandNavSubject.asObservable();
   }

   constructor() { }
   }
}

然后在您的 header 组件中通过构造函数注入(inject)服务:

constructor(private eventsService: EventsService){}

并在 fun() 函数中使用 this.eventsService.trigExpandNav(); 调用触发器展开导航函数