为父组件设置事件侦听器 属性

Setting up event listener for parent component property

一些背景知识

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

在 ChatComponent 中，我正在注入 AppComponent。

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

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

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

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

我的问题

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

将 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>);