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

我有2个组件,名为 list (i,e人员列表)和 details (我,e人员详细信息),我显示如下:

enter image description here

Here my requirements is: 在为ex:Person 1选择特定的 list-item 时,我想在 details 组件上显示 Person 1 详细信息,该组件出现在右侧,如下所示:

enter image description here

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

DEMO

回答(3)

2 years ago

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

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

  }

}

2 years ago

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

Note :在这个例子中,我假设当你点击一个元素时,它会触发这个函数 . 让我们假设您的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

2 years ago

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

将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>