无法调用其类型缺少调用签名的表达式。类型 'EventEmitter<Number>' 没有兼容的调用签名

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 个组件。我想在单击按钮或 link 时触发第一个组件的事件，并在 html 文件的第二个组件中收听该事件，例如 sda

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

Answer 1

你不应该为服务使用事件发射器，这是一个更适合 RxJS BehaviorSubject 或 Subject 的地方。根据您的需要。

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

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

export class EventsService {

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

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

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

   constructor() { }
   }
}

然后在您的 header 组件中通过构造函数注入服务：

constructor(private eventsService: EventsService){}

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

无法调用其类型缺少调用签名的表达式。类型 'EventEmitter<Number>' 没有兼容的调用签名

Cannot invoke an expression whose type lacks a call signature. Type 'EventEmitter<Number>' has no compatible call signatures

javascript

typescript

angular

angular7