角度聊天实现答案

【问题标题】：chat implementation in angular角度聊天实现
【发布时间】：2022-01-02 13:51:57
【问题描述】：

我目前有一个名为聊天的父组件和两个名为侧边栏的子组件（由用户列表组成）和对话详细信息（由与每个用户的聊天组成）.. 我想要的功能是，如果我单击侧边栏中的任何用户，我希望在右侧打开该用户的聊天，就像在 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>

【问题讨论】：

这个问题没有显示足够的研究工作，我建议你检查 Angular 文档并阅读组件之间的数据和逻辑交互（数据绑定）。
请提供足够的代码，以便其他人更好地理解或重现问题。

标签： angular typescript chat whatsapp

【解决方案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 来使用更具反应性的方法。

【讨论】：