У меня есть 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);
}
}
client-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();
}
}
client-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() {}
}
selected-client-details.component.html:
<div>
<p>{{selectedClient?.firstName}}</p>
<p>{{selectedClient?.age}}</p>
<p>{{selectedClient?.address}}</p>
</div>
Если мой список клиентов-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>
- оно работает. Когда я нажимаю на пользователя, появляется блок с информацией о пользователе. Но информация о пользователе должна быть другим компонентом. И есть проблема.
Думаю, я должен сделать что-то вроде этого:
(в client-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>
Но я не понимаю, как я могу это сделать. Помогите мне, пожалуйста ...
<app-selected-client-details [selectedClient]='selectedClient'></app-selected-client-details>
- person Ravi Sevta   schedule 21.07.2018