要将选定的下拉ID传递给另一个组件

Question

我有一个名为 list 的组件，其中我在customers中显示我的所有dropdown名称，如下所示：

receipt field

现在从clicking/selecting到item(i,e customer)的特定dropdown上，我想将id发送到存在于另一个称为 display的组件中的method/function 。

显示组件代码：

TS文件

import { Component, OnInit } from '@angular/core';
import { ContactService } from '../contacts.service';

@Component({
  selector: 'app-display',
  templateUrl: './display.component.html',
  styleUrls: ['./display.component.css']
})
export class DisplayComponent implements OnInit {
public contacts:any;
  constructor(private myService: ContactService) { }

public async ngOnInit(): Promise<void> {
 this.contacts = await this.myService.getCustomersById('id');<=== Need to pass emitted customer id to here
}

}

• 现在，我从列表组件的下拉列表中发出 ID 。

• 但是我无法将发出的 id 传递给 services 文件，并且无法在中订阅该 id >显示组件。我已经创建了一个服务文件。但是我无法communicate使用服务文件。

Answer 1

将点击事件从(onSelectionChange)更改为(click)。

HTML代码：

<div class="main-div">
<h3>List</h3>
<mat-form-field>
  <mat-select placeholder="Select Customer">
    <mat-option *ngFor="let customer of customers" [value]="customer.id" (click)="selected($event, customer.id)">
      {{customer.customerName}}
    </mat-option>
  </mat-select>
</mat-form-field>
</div> 

TS代码：

public async selected(event: MatOptionSelectionChange, id: string): Promise<void> {
    this.myService.onCustomerSelect.next(id);
}

Service.ts：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ICustomer } from './models';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class ContactService {
 private  baseUrl : string = '../../assets/customers.json';

 onCustomerSelect: BehaviorSubject<any> = new BehaviorSubject<any>(null);
  constructor(private http: HttpClient) { }


 public getCustomers(id : string): Promise<ICustomer> {
  const apiUrl: string = '../../assets/customers.json';

  return this.http.get<ICustomer>(apiUrl + id).toPromise();
}

public async getCustomersById(id : string): Promise<ICustomer[]> {
    const apiUrl: string = `${this.baseUrl}/${id}`;

    return this.http.get<ICustomer[]>(apiUrl).toPromise();
  }

}

UPDATED STACKBLITZ

编辑：

您可以这样调用API：

public async ngOnInit(): Promise<void> {
    this.myService.onCustomerSelect.subscribe(value => {
      console.log('FROM Display Comp -----', value);
      this.CustId = value;
      if (this.CustId) {
        this.myService.getCustomersById(this.CustId).then(response =>{
          console.log(response)
        })
      }
    })
  }

Answer 2

将数据传递到非父或子组件的最佳方法是使用Subject中的rxjs。我给你举个例子：

在您的服务中，像这样创建Subject的实例：

import { BehaviorSubject } from 'rxjs';
static idChange: BehaviorSubject<any> = new BehaviorSubject<any>(false);

现在，当您要传递组件中具有其ID的任何数据时，请执行以下操作：（我的服务名称为GroupService）

GroupService.idChange.next(value);

然后，如果要获取任何组件中的数据，只需在Subject中预订此ngOnInit。因此，当您在应用程序中的某个位置传递一个值到Subject的该实例时，您将在预订该位置的任何位置获取数据。

GroupService.idChange.subscribe(id => {
      console.log('Got id: ', id);
});