在另一个组件中显示选定的列表项值

Question

我有2个组件，分别显示为list（即“人”列表）和details（即“人”详细信息）：

这里我的要求是：在为例如人1选择特定的list-item时，我想在Person 1组件上显示details详细信息右侧，像这样：

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

DEMO

Answer 1

您可以使用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

Answer 2

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

工作演示在这里-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();
  }

}

列表组件

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;
    });

  }

}

Answer 3

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

将onSelectionChange添加到材料列表：

(onSelectionChange)="personSelected(event)"

将输出添加到列表组件：

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

在inPersonSelect上的personSelected呼叫中发出：

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

在应用程序组件中，将侦听器添加到列表组件：

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>