为父组件属性

Question

一点背景

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

在ChatComponent我正在注入AppComponent。

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

我这样做是因为AppComponent也是聊天服务器的网关。所以无论你在哪个页面，应用程序都会一直收到聊天记录。

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

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

我的问题

每当我导航到我的ChatComponent时，我怎样才能设置某种事件监听器，以便当AppComponent更新usersOnline属性时，该组件可以执行某些操作？< / p>

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