我现在有一个父母组件叫聊天和两个孩子组件名为栏(组成的用户名单)和对话的细节(包括聊天与每个用户).. 能我想的是如果我点击任何用户在本栏我想聊天开放的，用户在右边，就像新的报网..下面是一个小型的代码结构的我的部件
聊天的部件(父母分量)
<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 通过 @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);
}
}
你也可以使用一个更具反应性方法通过使用观测量.