Question

我已经通过依赖注入插入了一个服务组件（组件A），并且该服务组件A不在组件B的模板中。

如何捕获从服务组件发出的事件 - 如何在父组件（组件B）中捕获它？我已经将emit命令放在子组件中，如下所示：

// For demo purposes
var io = { to: function(player) { return { emit: function(s, msg) { console.log(player, 'received', msg) } } } }


var array = ['Peter', 'James', 'Susan', 'Thomas']

array.forEach(function(player, i, a) {
  (a = a.slice()).splice(i, 1)
  io.to(player).emit('message', a)
})

我正在发布这样的事件：

@Output() hostReady = new EventEmitter();

为了在父母身上捕获它我需要做什么？

Answer 1

好吧，既然我之前没有发布我的解决方案，我现在也可以这样做。所以，我做的是我有一个用户实施的模式。所有想要了解事件的组件都会订阅它，当事件被触发时，他们就会知道它。该解决方案涉及rxjs对象：

import { Subject } from 'rxjs/Subject';

我有一个特殊的组件intercommService，它将一个事件声明为rxjs主题，如下所示：

selectedLanguage: Subject<string>;
constructor() {
    this.selectedLanguage = new Subject<any>(); 
}

然后，每个组件（也注入了此依赖关系）都可以使用以下命令触发事件：

this.intercomm.selectedLanguage.next(language);

每个订阅者组件都会将此作为对该事件的订阅，即在构造函数中，订阅者将注入该依赖项，并将观察其事件：

constructor(private intercomm: IntercommService) {
    this.intercomm.selectedLanguage.asObservable().subscribe((value: any) => {
        // Do something with value
    });
}

Answer 2

有不同的方法可以做到。

看看食谱中的例子。

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#child-to-parent

从注入组件的服务发出的Catch事件

2 个答案: