Angular 7 - Эффективный способ разработки компонентов для интерфейса настольного чата? - PullRequest
Новая
       18

Angular 7 - Эффективный способ разработки компонентов для интерфейса настольного чата?

0 голосов
/ 16 февраля 2019

Мне нужно разработать интерфейс чата на рабочем столе, как LinkedIn.

enter image description here

Я думаю создать родительский контейнерный компонент, который будет иметь 3 дочерних компонента, как показано на скриншоте.

Компонент 1будет иметь список пользователей чата.

Компонент 2 будет иметь список всех сообщений для выбранного пользователя / группы и форму отправки сообщения внизу.

Компонент 3 будет содержать сведения о выбранном пользователе / ​​группекак общие медиа, теги, имя группы, изображение группы.

Компонент 2 и Компонент 3 будут подписываться на щелчок по элементу списка Компонента 1. Таким образом, всякий раз, когда пользователь / группа выбирается из Компонента 1, все детали этого конкретного пользователя / группы будут заполняться в Компоненте 2 и3.

Точно так же каждый брат может общаться с двумя другими компонентами и обновлять данные друг друга по мере необходимости.Например, если пользователь отправит фотографию из формы сообщения в Компоненте 2, то Компонент 1 и Компонент 3 будут обновлены соответствующим образом.

Все три компонента будут братьями и сестрами, а путь к маршрутизатору будет передан родительскому контейнеру.которые содержат все эти 3 компонента.

Это правильный подход к разработке такого интерфейса с использованием Angular 7?

1 Ответ

0 голосов
/ 16 февраля 2019

Я спроектировал нечто подобное, хотя и меньше, поскольку в нем было только две панели, а не три:

enter image description here

Я использовал два дочерних компонента: 

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

Компонент списка: 

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

Компонент сведений (где шаблон был связан с product): 

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

2) Использование простого сервиса с геттерами. Код здесь: https://github.com/DeborahK/Angular-Communication/tree/master/APM-FinalWithGetters

Служба (простое свойство): 

currentProduct: IProduct;

Компонент списка: 

  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

...