在Angular中动态添加组件

Question

我对Angular很新，并尝试构建一个聊天应用程序。我有一个右侧组件（chatlist.component）上所有人的列表。该组件的列表为chatlist-item.component。我有另一个组件，chat-window.component这是聊天窗口。我想点击我的chatlist-item打开聊天窗口。

为此，我需要在点击时动态添加chat-window.component。对于初始测试，我在主页（app.component.html）上添加了一个按钮，并使用ComponentFactoryResolver动态添加组件。但为此，我必须将ViewChild与ng-template一起使用。

<ng-template #chatcontainer>
            </ng-template>

这工作得非常好。但我无法访问chatcontainer组件中的chatlist-item，我实际上希望点击发生。 这是我工作的链接：

StackBlitz Link to my work

我不确定如何实现这一目标。任何帮助都将受到高度赞赏。

修改 请以全屏模式查看上述StackBlitz链接中的预览，因为聊天列表仅可见，或使用以下网址 Link to the preview