angular中的聊天实现

Question

我目前有一个名为chat的父组件和两个名为侧边栏的子组件(由用户列表组成(和对话细节(由与每个用户的聊天组成(。。我想要的功能是，如果我点击侧边栏中的任何用户，我希望该用户的聊天在右侧打开，就像在WhatsApp网络中一样。。下面是我的组件结构的小代码

聊天组件(父组件(

<div class="container-fluid">
<div class="row">
<div class="col-5">
<app-sidebar></app-sidebar>
</div>
<div class="col-7">
<app-conversation-detail></app-conversation-detail>
</div>
</div>

Answer 1

您可以管理父组件本身的状态，只需通过@Input()将数据传递给sidebar和conversation-detail。

首先，你可以做这样的事情。

@Component({
selector: 'my-app',
template: `
<div class="row">
<div class="col-5">
<app-sidebar [convoList]="convoList" (userSelected)="selectUser($event)"></app-sidebar>
</div>
<div class="col-7">
<app-conversation-detail [conversation]="conversation">
</app-conversation-detail>
</div>
</div>`,
styleUrls: ['./app.component.css'],
})
export class AppComponent {
selectedUser = null;
conversation = null;
convoList = [];
constructor(private conversationService: ConversationService) {}
selectUser(user: string) {
this.selectedUser = user;
this.conversation = this.getConversationsOfUser(user);
}
getConversationsOfUser(user: string) {
return this.conversationService.getConversationOfUser(user);
}
}

您也可以通过使用Observables来使用更被动的方法。