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

Posted 2023-03-13

【中文标题】单击另一个组件时组件的Angular 6输出信息

【英文标题】：Angular 6 output info from the component when another component is clicked

【发布时间】：2018-12-29 10:50:03

【问题描述】：

我有 3 个组件： 一、客户名单 2. 客户（姓名） 3. 客户的完整信息（姓名、年龄、地址），当我点击用户项时必须显示。

而且我不明白，当我在客户列表中单击此客户时，如何获取有关特定客户的信息（如何显示第三个组件）。

这是我的代码：

1) 客户列表.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);
  

clients-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）cli​​ent-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>

---

如果我的 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>

有效。当我点击用户时，阻止出现用户信息。但是用户的信息必须是另一个组件。还有一个问题。

我想我必须这样做：

（在 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>

但我无法理解我该怎么做。请帮我...

【问题讨论】：

传数据<app-selected-client-details [selectedClient]='selectedClient'></app-selected-client-details>

【参考方案1】：

我对您的代码做了一些更改，但首先在客户端详细信息上 selectClient 方法发出 undefined 我已修复

this.clientSelected.emit(this.client); // client was clients

clients-list.component.html 看起来像这样

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


<app-selected-client-details #selectedClientComponent></app-selected-client-details>

这就是我如何通过模板引用#selectedClientComponent 将选定的客户端发送到选定的客户端组件并将 $event 分配给 selectedClientComponent 的 selectedClient

selectedClientComponent.selectedClient=$event

$event 是发出的客户端对象

stackblitz example

【讨论】：

@tanya210392 乐于助人