我是Angular的新手,并试图 Build 一个聊天应用程序 . 我有一个右侧组件所有人的列表( 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>
这工作得非常好 . 但我无法在我的 chatlist-item
组件中访问此 chatcontainer
,我实际上希望点击发生 . 这是我工作的链接:
我不确定如何实现这一目标 . 任何帮助将受到高度赞赏 .
Edit 请以全屏模式查看上述StackBlitz链接中的预览,因为聊天列表仅可见,或使用以下网址Link to the preview