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

Question

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

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

组件 1 将包含聊天用户列表。

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

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

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

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

所有三个组件都是同级组件，并且路由器路径将被赋予包含所有这 3 个组件的父容器。

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

Answer 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>

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

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

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

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

我用三种不同的方式实现了这一点:

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

这是服务的片段:

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);
  }

详细信息组件(其中模板绑定(bind)到产品):

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;
  }

详细信息组件(其中模板绑定(bind)到产品):

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

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