为父组件属性设置事件监听器答案

【问题标题】：Setting up event listener for parent component property为父组件属性设置事件监听器
【发布时间】：2017-10-17 01:51:48
【问题描述】：

一点背景

我有一个使用 Angular 2 制作的简单聊天应用程序。我的应用程序与大多数 Angular 2 应用程序一样，以AppComponent 开头，它使用router-outlet 根据路由呈现子组件。

在ChatComponent 中，我正在注入AppComponent。

constructor( @Inject(forwardRef(() => AppComponent)) app: AppComponent) { .. }

我这样做是因为这个AppComponent 也是聊天服务器的网关。因此，无论您在哪个页面上，应用程序都会始终收到聊天消息。

AppComponent 类还有一个 public usersOnline 数组，它是所有当前在线用户的列表。

这可能不是最性感的方式，但它对我有用。到目前为止一切顺利。

每当我导航到我的ChatComponent 时，我该如何设置某种事件侦听器，以便当AppComponent 更新usersOnline 属性时该组件可以执行某些操作？

【问题讨论】：

【解决方案1】：

将usersOnline 更改为可观察的（或特别是主题），然后在您的ChatComponent 中执行：

app.usersOnline$.subscribe(value => ({value handler code>});

或者，如果您在模板中需要它：

<div>Number of online users {(app.usersOnline$ | async).?length}</div>

在您的AppComponent 中更改分配：

this.usersOnline = <some_value>;

到

this.usersOnline$.next(<some_value>);

【讨论】：