单击另一个组件时组件的Angular 6输出信息

我有3个组件：1 . 客户列表2.客户端（名称）3 . 客户端的完整信息（名称，年龄，地址），单击用户项目时必须显示 .

我无法理解，当我在客户列表中单击此客户端时，如何获取有关特定客户端的信息（如何显示第三个组件） .

这是我的代码：

1）clients-list.component.ts：

import { Component, OnInit, Input } from '@angular/core';
import { ClientsService } from '../clients.service';
import { Client } from '../../models/client.model';  

@Component({
  selector: 'app-clients-list',
  templateUrl: './clients-list.component.html',
  styleUrls: ['./clients-list.component.css']
})
export class ClientsListComponent implements OnInit {

  public clients: Client[] = [];
  public selectedClient;
  constructor(private _clientsService: ClientsService) {}
  ngOnInit() {
    this._clientsService.getClient()
      .subscribe(data => this.clients = data);
  }

}

客户-list.component.html：

<app-client-detail *ngFor="let client of clients" [clients]="client" (clientSelected)="selectedClient=client"></app-client-detail>
<app-selected-client-details></app-selected-client-details>

2）client-detail.component.ts：

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-client-detail',
  templateUrl: './client-detail.component.html',
  styleUrls: ['./client-detail.component.css']
})
export class ClientDetailComponent implements OnInit {
  @Input() clients;
  @Output() clientSelected: EventEmitter<any> = new EventEmitter;
  constructor() {}
  ngOnInit() {}
  selectClient() {
    this.clientSelected.emit();
  }
}

客户detail.component.html：

<div (click)="selectClient()">
  <p>{{clients.name}}</p>
</div>

3）selected-client-details.component.ts：

import {Component, OnInit, Input} from '@angular/core';
@Component({
  selector: 'app-selected-client-details',
  templateUrl: './selected-client-details.component.html',
  styleUrls: ['./selected-client-details.component.css']
})
export class SelectedClientDetailsComponent implements OnInit {
  @Input() selectedClient;

  constructor() {}
  ngOnInit() {}
}

所选的客户端 - details.component.html：

<div>
  <p>{{selectedClient?.firstName}}</p>
  <p>{{selectedClient?.age}}</p>
  <p>{{selectedClient?.address}}</p>
</div>

如果我的clients-list.component.html看起来像这样 -

<app-client-detail *ngFor="let client of clients" [clients]="client" (clientSelected)="selectedClient=client"></app-client-detail>

<div>
  <p>{{selectedClient?.firstName}}</p>
  <p>{{selectedClient?.age}}</p>
  <p>{{selectedClient?.address}}</p>
</div>

• 它有效 . 当我点击用户时，阻止用户's info appear. But user'的信息必须是另一个组件 . 而且有一个问题 .

我想我必须这样做：

（在clients-list.component.html中）

<app-client-detail *ngFor="let client of clients" class="client-item" [clients]="client" (clientSelected)="selectedClient=client"></app-client-detail>

<app-selected-client-details [???]></app-selected-client-details>

但我不能说我怎么能这样做 . 帮帮我吧...