나는 현재 상위 구성요소라는 채팅을하고 두 아이 구성 요소라는 사이드(로 구성된 사용자 목록)및 대부(구성된 채팅으로 각 사용자).. 이 기능을 원하는 경우에 어떤 사용자가 존재하 사이드 바에서 내가 원하는 채팅을 열의는 사용자에 오른쪽에서처럼 WhatsApp 웹..아래에 작은 코드의 구조를 나의 구성요소
채팅을 구성 요소(상위 구성요소)
<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>
을 관리할 수 있는 상태에서 부모성 자체가 그냥 통과 데이터를 sidebar 고 conversation-detail via @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);
}
}
당신이 사용할 수도 있습 반응성 접근 방식을 사용하여 관찰 가능.