我是Angular的新手,并试图 Build 一个聊天应用程序 . 我有一个右侧组件所有人的列表( chatlist.component ) . 该组件有一个 chatlist-item.component 列表 . 我有另一个组件, chat-window.component 这是聊天窗口 . 我想点击我的chatlist-item打开聊天窗口 .

为此,我需要在点击时动态添加 chat-window.component . 对于初始测试,我在主页上添加了一个按钮( app.component.html ),并使用 ComponentFactoryResolver 动态添加组件 . 但为此,我不得不使用 ViewChildng-template .

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

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

StackBlitz Link to my work

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

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