Le chat de la mise en œuvre angulaire

Question 1

J'ai actuellement un composant parent appelé le chat et les deux enfants composant nommé barre latérale(composé de la liste des utilisateurs) et de la conversation détail(composé de discuter avec chaque utilisateur).. la fonctionnalité que je veux c'est que si je clique sur n'importe quel utilisateur présent dans la sidebar, je veux le chat pour ouvrir de cet utilisateur sur le côté droit, juste comme dans WhatsApp web.. voici un petit code de la structuration de mes composants

Chat composant(composant parent)

<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

Vous pouvez gérer l'état du composant parent lui-même et juste de transmettre les données à votre sidebar et conversation-detail via @Input().

Pour commencer, vous pourriez faire quelque chose comme cela.

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

Vous pouvez également utiliser une approche réactive en utilisant des Observables.

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

Vous pouvez gérer l'état du composant parent lui-même et juste de transmettre les données à votre sidebar et conversation-detail via @Input().

Pour commencer, vous pourriez faire quelque chose comme cela.

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

Vous pouvez également utiliser une approche réactive en utilisant des Observables.

Le chat de la mise en œuvre angulaire

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie