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

您不应该为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()调用触发器扩展导航功能

无法调用类型缺少调用签名的表达式。类型“ EventEmitter <号码>”没有兼容的呼叫签名

1 个答案: