Açısal olarak sohbet uygulaması

Question 1

Şu anda sohbet adlı bir üst bileşene ve kenar çubuğu(kullanıcı listesinden oluşan) ve konuşma ayrıntısı(her kullanıcıyla sohbetten oluşan) adlı iki alt bileşene sahibim.. istediğim işlevsellik, kenar çubuğunda bulunan herhangi bir kullanıcıyı tıklarsam, sohbetin WhatsApp web'deki gibi sağ tarafta açılmasını istiyorum.. aşağıda, bileşenlerimin yapılandırılmasının küçük bir kodu bulunmaktadır

Sohbet bileşeni (üst bileşen)

<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

Durumu ana bileşenin kendisinde yönetebilir ve verileri yalnızca kendi bileşeninize iletebilirsiniz. sidebar ve conversation-detail ile @Input().

Başlangıç olarak, böyle bir şey yapabilirsin.

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

Gözlemlenebilirleri kullanarak daha reaktif bir yaklaşım da kullanabilirsiniz.

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

Durumu ana bileşenin kendisinde yönetebilir ve verileri yalnızca kendi bileşeninize iletebilirsiniz. sidebar ve conversation-detail ile @Input().

Başlangıç olarak, böyle bir şey yapabilirsin.

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

Gözlemlenebilirleri kullanarak daha reaktif bir yaklaşım da kullanabilirsiniz.

Açısal olarak sohbet uygulaması

Soru

En iyi cevabı

Diğer dillerde

Bu sayfa diğer dillerde

Bu kategoride popüler

Popüler soruları bu kategoride