Chat punerea în aplicare în unghiulare

Question 1

Am în prezent un părinte componentă numită chat și doi copii componenta nume laterală(constând din lista de utilizator) și conversație detalii(format de chat cu fiecare utilizator).. funcționalitatea vreau este daca dau click pe orice tip de utilizator prezentă în bara laterală vreau chat pentru a deschide utilizatorului pe partea dreapta la fel ca în WhatsApp web.. mai jos este un mic cod de structurare a mea componente

Chat componentă(părinte componentă)

<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

Puteți gestiona de stat în cadrul componentei părinte în sine și doar trece datele dumneavoastră sidebar și conversation-detail prin @Input().

Pentru început, ai putea face ceva de genul asta.

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

Puteți folosi, de asemenea, o mai reactive abordare prin utilizarea Observabile.

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

Puteți gestiona de stat în cadrul componentei părinte în sine și doar trece datele dumneavoastră sidebar și conversation-detail prin @Input().

Pentru început, ai putea face ceva de genul asta.

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

Puteți folosi, de asemenea, o mai reactive abordare prin utilizarea Observabile.

Chat punerea în aplicare în unghiulare

Problema

Cel mai bun răspuns

În alte limbi

Această pagină este în alte limbi

Popular în această categorie

Întrebări frecvente în această categorie