到另一个部件显示所选择的列表项的值[关闭](To display selected list-ite

我所说的2个分量list （I，E人名单）和details ，我正在显示这样的（I，E人详细说明）：

在这里我的要求是：在选择特定的list-item为前：人1，我想要显示的Person 1的详细details分量出现在右侧，这样的事情：

如何可以分配为单个值list-item在（I，E的人1人2 ....） list组分并将它们传递到details组件来显示如图第二image.I看见一些例子，但它们不匹配我的要求。

DEMO

Answer 1:

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

工作演示是在这里- 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 2:

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

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

添加onSelectionChange材料清单：

(onSelectionChange)="personSelected(event)"

输出添加到您的列表组件：

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

在personSelected通话onPersonSelect发出：

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>

文章来源: To display selected list-item values in another component [closed]