Невозможно вызвать выражение, тип которого не имеет сигнатуры вызова. Тип 'EventEmitter ‹Number›' не имеет совместимых подписей вызовов

Я пытаюсь написать службу, в которой некоторые события запускаются с помощью соответствующих методов в ней, чтобы любой компонент в моем приложении мог ее прослушивать.

Итак, я создал настраиваемое событие в сервисе следующим образом

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

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


person Community    schedule 17.11.2018    source источник
comment
Вы имеете в виду eventsService.trigExpandNav()? Или eventsService.expandNav.emit()?   -  person user184994    schedule 17.11.2018
comment
Да, я имею в виду eventsService.trigExpandNav ()   -  person    schedule 17.11.2018
comment
вы, вероятно, захотите изменить свой EventEmitter ‹Number› на EventEmitter ‹number›. Число не является примитивным типом и почти не используется.   -  person JoshSommer    schedule 17.11.2018
comment
Пожалуйста, посмотрите изменения   -  person    schedule 17.11.2018


Ответы (1)


Вы не должны использовать эмиттеры событий для Service, это лучшее место для 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() { }
   }
}

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

constructor(private eventsService: EventsService){}

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

person JoshSommer    schedule 17.11.2018
comment
Итак, чтобы вызвать это событие, мне нужно вызвать метод trigExpandNav (), и что мне делать, чтобы прослушивать эти события? - person ; 17.11.2018
comment
Подпишитесь на expandNav$ - person JoshSommer; 17.11.2018
comment
поместите это в ngOnInit вашего компонента this.eventsService.expandNav $ .subscribe (value = ›console.log (value)); - person JoshSommer; 17.11.2018
comment
Как? И я могу сделать это в html ‹p (expandNav) = someFun ()› sfs ‹/p› - person ; 17.11.2018
comment
Нет, () обозначает источник события. теги p не имеют этих - person JoshSommer; 17.11.2018
comment
если вы хотите подписаться на наблюдаемое в своем шаблоне, вам нужно использовать асинхронный канал { observable$ | async } - person JoshSommer; 17.11.2018
comment
Посмотрите мой вопрос еще раз, пожалуйста, я обновил его, добавив более подробное объяснение того, чего я пытаюсь здесь достичь. - person ; 17.11.2018
comment
Привет, парень, у тебя проблемы с реализацией твоего предложения. Вы можете передать мне образец рабочего кода? @theOriginalJosh - person ; 17.11.2018