Невозможно вызвать выражение, тип которого не имеет подписи вызова. Тип '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 компонента. Я хочу вызвать событие из 1-го компонента, когда нажата кнопка или ссылка, и прослушать это событие во 2-м компоненте из html-файла, например, sda

Для этого я сделал сервис, в котором я посылаю событие через метод. Дело в том, что он работает как положено.

Answer 1

Вы не должны использовать источники событий для Service, это лучшее место для RxJS BehaviorSubject или Subject. в зависимости от ваших потребностей.

@Ouput() с и EventEmitters только для компонентов

Таким образом, ваш сервис должен стать чем-то вроде:

export class EventsService {

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

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

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

   constructor() { }
   }
}

затем в ваш компонент заголовка внедрить сервис через конструктор с помощью:

constructor(private eventsService: EventsService){}

и вызовите функцию расширения навигации триггера с помощью this.eventsService.trigExpandNav(); в вашей функции fun()