Реализация чата в angular

Question 1

В настоящее время у меня есть родительский компонент под названием чат и два дочерних компонента с именем боковая панель(состоящий из списка пользователей) и сведения о разговоре(состоящий из чата с каждым пользователем).. функциональность, которую я хочу, заключается в том, что если я нажму на любого пользователя, присутствующего на боковой панели, я хочу, чтобы чат этого пользователя открылся справа, как в WhatsApp web.. ниже приведен небольшой код структурирования моих компонентов

Компонент чата(родительский компонент)

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

Question 2

Вы можете управлять состоянием в самом родительском компоненте и просто передавать данные в свой sidebar и conversation-detail через @Input().

Для начала, вы могли бы сделать что-то вроде этого.

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

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

Adithya Sreyaj · Answer 1 · 2021-11-24T07:44:56

Вы можете управлять состоянием в самом родительском компоненте и просто передавать данные в свой sidebar и conversation-detail через @Input().

Для начала, вы могли бы сделать что-то вроде этого.

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

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

Реализация чата в angular

Вопрос

Лучший ответ

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории