将选定的下拉列表 id 传递给另一个组件

Question

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

现在 clicking/selecting 来自 dropdown 的特定 item(i,e customer) 我想将 id 发送到另一个名为 [= 的组件中存在的 method/function 37=]显示.

显示组件代码：

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
}

}

现在我从 list 组件的下拉列表中发出 ID。
但我无法将发出的 id 传递给 services 文件，而且我无法订阅 id in display component.I 已经创建了一个 services 文件。但是我无法 communicate 使用 services 文件。

DEMO

Answer 1

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

在您的服务中创建一个 Subject 的实例，如下所示：

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

现在，当您想要从您拥有该 ID 的组件传递任何数据时，请执行以下操作：（我的服务名称是 GroupService）

GroupService.idChange.next(value);

然后如果你想获取任何组件中的数据，只需在 ngOnInit 中订阅这个 Subject。因此，当您在应用程序的某处将值传递给 Subject 的实例时，您将在订阅它的任何地方获取数据。

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

Answer 2

将您的点击事件从 (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)
        })
      }
    })
  }

将选定的下拉列表 id 传递给另一个组件

To pass selected dropdown id to another component

typescript

angular-services

angular

angular6