Bate-papo implementação angular

Question 1

Atualmente tenho um pai componente chamado de bate-papo e dois criança componente denominado barra lateral(que consiste de lista de usuário) e conversa detalhe(que consiste de conversar com cada usuário).. a funcionalidade que eu quero é que se eu clicar em qualquer utilizador presente na barra lateral eu quero o bate-papo para abrir do que o usuário do lado direito, assim como no WhatsApp web.. abaixo é um pequeno código de estruturação do meu componentes

Bate-papo componente(componente pai)

<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

Você pode gerenciar o estado no principal componente em si e apenas passar os dados para o seu sidebar e conversation-detail via @Input().

Para começar, você poderia fazer algo assim.

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

Você também pode usar um mais reativa abordagem usando Observáveis.

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

Você pode gerenciar o estado no principal componente em si e apenas passar os dados para o seu sidebar e conversation-detail via @Input().

Para começar, você poderia fazer algo assim.

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

Você também pode usar um mais reativa abordagem usando Observáveis.

Bate-papo implementação angular

Pergunta

Melhor resposta

Em outros idiomas

Esta página está em outros idiomas

Popular nesta categoria

Perguntas populares nesta categoria