To display selected list-item values in another component [closed]

问题

I have 2 components called list(i,e Person list) and details(i,e Person details) which i am displaying like this:

Here my requirements is: On selecting particular list-item for ex:Person 1, I want to display the Person 1 details on details component which present on the right side, something like this:

How can i assign values for individual list-item (i,e Person 1, Person 2 ....) in list component and pass them to details component to display as shown in 2nd image.I saw some examples but they are not matching to my requirement.

DEMO

回答1:

There are several way to communicate among different components. In your case you can use Services to communicate.

Working demo is here - https://stackblitz.com/edit/list-examples-nh4hik

person.service.ts

This is the service which will communicate between one component to another.

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

  }

}

回答2:

You can use BehaviorSubject to achieve that.

Declare a service like that:

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

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

Inject the service into the listComponent

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

add a function that trigger the BehaviorSubject:

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

Note: in this example I assume that when you click on a element, it will fire this function. Let's assume your html being something like that:

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

In the detailsComponent catch the result from the BehaviorSubject (inject the service first):

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

then in the .html, you could've something like that:

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

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

回答3:

Different approach based on components input/output:

Add onSelectionChange to material list:

(onSelectionChange)="personSelected(event)"

Add output to your list component:

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

In personSelected call onPersonSelect emit:

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

In app component add listener to list component:

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

And add it to list:

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

Finally pass selected person to detains component:

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

Accept input parameter in details component and do what ever you want:

@Input() selectedPerson;

In template

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

来源：https://stackoverflow.com/questions/53188163/to-display-selected-list-item-values-in-another-component

标签

angular

typescript

angular6