चैट कार्यान्वयन में कोणीय

आप का प्रबंधन कर सकते हैं राज्य में माता-पिता घटक ही है और सिर्फ पारित करने के लिए डेटा अपने sidebar और conversation-detail के माध्यम से @Input().

शुरुआत के लिए, आप कुछ इस तरह कर सकता.

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

आप भी उपयोग कर सकते हैं एक और अधिक प्रतिक्रियाशील दृष्टिकोण का उपयोग करके Observables.