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

Question

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

​

​

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

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

组件2将有一个选定用户/组的所有消息的列表，并在底部有一个发送消息表单。

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

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

类似地，每个兄弟可以与其他2个组件通信，并根据需要更新彼此的数据。例如，如果用户从组件2中的消息表单发送一张照片，则组件1和组件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>

你可以用类似的方式添加第三个。

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

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

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

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

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

list组件：

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

详图构件(样板绑定到product的位置)：

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

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

服务(一个简单的属性)：

currentProduct: IProduct;

list组件：

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

详图构件(样板绑定到product的位置)：

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

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