Angular 7 - 为桌面聊天界面设计组件的有效方法？答案

【问题标题】：Angular 7 - Efficient way to design components for a desktop chat interface?Angular 7 - 为桌面聊天界面设计组件的有效方法？
【发布时间】：2019-02-16 05:35:10
【问题描述】：

我需要开发一个桌面聊天界面，就像 LinkedIn。

我正在考虑创建一个父容器组件，它有 3 个子组件，如屏幕截图所示。

组件 1 将具有聊天用户列表的列表。

组件 2 将包含所选用户/组的所有消息的列表以及底部的发送消息表单。

组件 3 将包含有关所选用户/组的详细信息，例如共享媒体、标签、组名称、组图像。

组件 2 和组件 3 将订阅组件 1 的列表项单击。因此，每当从组件 1 中单击用户/组时，该特定用户/组的所有详细信息都将填充到组件 2 和 3 中。

同样，每个兄弟姐妹可以与其他 2 个组件通信并根据需要更新彼此的数据。例如，如果用户在组件 2 中通过消息表单发送照片，则组件 1 和组件 3 将相应更新。

这三个组件都是同级组件，并且路由路径将提供给包含所有这三个组件的父容器。

这是使用 Angular 7 设计此类界面的正确方法吗？

【问题讨论】：

对我来说，你的方法听起来不错。编码快乐..!!!
在我看来你的方法是对的。
是的！这绝对是正确的开始......快乐的编码。

标签： javascript angular user-interface frontend chat

【解决方案1】：

我设计了类似的东西，虽然更小，因为它只有两个面板，而不是三个：

我使用了两个子组件：

<div class='row'>
    <div class='col-md-4'>
        <pm-product-shell-list></pm-product-shell-list>
    </div>
    <div class='col-md-8'>
        <pm-product-shell-detail></pm-product-shell-detail>
    </div>
</div>

您可以类似地添加第三个。

但是，我没有尝试让组件直接通信，而是设置了一个服务。每个组件都订阅了该服务以接收更改通知。

因此，如果用户从左侧列表中选择了一个项目，它会与服务通信，告知所选产品已更改。然后，另一个组件会从服务接收到发生更改的通知，因此它可以做出相应的反应（同样，这也适用于第三个组件。）

这使得系统的耦合度大大降低，并且更易于修改和维护。

我已经实现了这三种不同的方式：

1) 使用带有 BehaviorSubject 的简单服务。 代码在这里：https://github.com/DeborahK/Angular-Communication/tree/master/APM-Final

这是服务的sn-p：

private selectedProductSource = new BehaviorSubject<IProduct | null>(null);
selectedProductChanges$ = this.selectedProductSource.asObservable();

changeSelectedProduct(selectedProduct: IProduct | null): void {
    this.selectedProductSource.next(selectedProduct);
}

列表组件：

  onSelected(product: IProduct): void {
    this.productService.changeSelectedProduct(product);
  }

detail 组件（模板绑定到product）：

ngOnInit() {
    this.sub = this.productService.selectedProductChanges$.subscribe(
        selectedProduct => this.product = selectedProduct
    );
}

2) 使用带有 getter 的简单服务。 代码在这里：https://github.com/DeborahK/Angular-Communication/tree/master/APM-FinalWithGetters

服务（一个简单的属性）：

currentProduct: IProduct;

列表组件：

  onSelected(product: IProduct): void {
    this.productService.currentProduct = product;
  }

detail 组件（模板绑定到product）：

get product(): IProduct | null {
    return this.productService.currentProduct;
}

3) 使用 NgRx 进行状态管理。 代码在这里：https://github.com/DeborahK/Angular-NgRx-GettingStarted/tree/master/APM-Demo4

【讨论】：