El chat de la aplicación en angular

Question 1

Actualmente tengo un padre componente llamado chat y dos niños de componente nombre de la barra lateral(que consta de la lista de usuarios) y la conversación detalle(que consiste en charlar con cada usuario).. la funcionalidad que yo quiero es que si hago clic en cualquier usuario presente en la barra lateral quiero el chat para abrir de ese usuario en el lado derecho como en WhatsApp web.. a continuación es un pequeño código de estructuración de los componentes de mi

Chat componente(componente principal)

<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

Usted puede administrar el estado en el principal componente de sí mismo y acaba de pasar los datos a su sidebar y conversation-detail a través de @Input().

Para empezar, se podría hacer algo como esto.

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

También puede utilizar un mayor enfoque reactivo mediante el uso de variables Observables.

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

Usted puede administrar el estado en el principal componente de sí mismo y acaba de pasar los datos a su sidebar y conversation-detail a través de @Input().

Para empezar, se podría hacer algo como esto.

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

También puede utilizar un mayor enfoque reactivo mediante el uso de variables Observables.

El chat de la aplicación en angular

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría