在另一个组件中显示所选列表项值[关闭]

Posted 2021-04-09

我有2个组件叫做list（i，e人员名单）和details（我，e人员详细信息）我正在显示如下：

在这里我的要求是：在选择特定的list-item为ex：Person 1时，我想在Person 1组件上显示details详细信息，它出现在右侧，如下所示：

如何在list-item组件中为单个list（i，e Person 1，Person 2 ....）分配值，并将它们传递给details组件以显示如第二张图像所示。我看到了一些例子，但它们与我的不匹配需求。

DEMO

答案

有几种方法可以在不同的组件之间进行通信。在您的情况下，您可以使用服务进行通信。

工作演示在这里 - https://stackblitz.com/edit/list-examples-nh4hik

person.service.ts

这是将在一个组件与另一个组件之间进行通信的服务。

import { Injectable } from '@angular/core';
import { Subject , Observable} from 'rxjs';

@Injectable()
export class PersonService {

  person$ = new Subject();

  public setPerson(person){
    this.person$.next(person);
  }

  public getPerson() : Observable<any>{
    return this.person$.asObservable();
  }

}

List Component

export class ListComponent {

  constructor(private personService : PersonService){}

  public setSelected(person){
    this.personService.setPerson(person);
  }

}

DetailsComponent

export class DetailsComponent implements OnInit {

  person : any;
  constructor(private personService : PersonService){}

  ngOnInit() {

    this.personService.getPerson().subscribe(person=>{ //<-- subscribe 

      this.person = person;
    });

  }

}

另一答案

您可以使用BehaviorSubject来实现这一目标。

声明这样的服务：

@Injectable()
export class YourService{
  private data$ = new BehaviorSubject<any>(null);
  public dataEvent = this.data$.asObservable();

  public setData(data: any){
    this.data$.next(data);
  }
}

将服务注入listComponent

constructor(
  ...
  private serivice: YourService
) {
...
}

添加一个触发BehaviorSubject的函数：

function sendData(data){
  this.service.setData(data);
}

注意：在这个例子中，我假设当你点击一个元素时，它会触发这个函数。让我们假设您的html是这样的：

<div *ngFor="let item of yourList>
  <span (click)="sendData(item)>{{item.name}}</span>
</div>

在detailsComponent中捕获BehaviorSubject的结果（首先注入服务）：

ngOnInit(){
  this.service.dataEvent
  .subscribe(res => {
    if(!!res){
      this.dataDetail = res;
    }
  });
}

然后在.html中，你可以这样：

<span>Name: {{dataDetail.name}}</span>

Stackblitz：https://stackblitz.com/edit/angular-d64vtt

另一答案

基于组件输入/输出的不同方法：

将onSelectionChange添加到材料列表：

(onSelectionChange)="personSelected(event)"

将输出添加到列表组件：

@Output() onPersonSelect = new EventEmitter<any>();;

在personSelected调用onPersonSelect发出：

personSelected(event) {
    this.onPersonSelect.emit(event);
}

在app组件中添加监听器到列表组件：

personSelectedListener(event) {
    this.selectedPerson = event;
}

并将其添加到列表中：

<app-list (onPersonSelect)="personSelectedListener"></app-list>

最后将选定人员传递给扣留组件：

<app-details [selectedPerson]="selectedPerson"></app-details>

接受详细信息组件中的输入参数并执行您想要的操作：

@Input() selectedPerson;

在模板中

<h4> Person Details </h4>
<div>Selected person is {{selectedPerson}}</div>