将选定的ID从组件传递到另一个组件

Question

场景：

我有一个api：

https://................../api/branches

与api中的/branches一样，是指多个branches和唯一的ID的api。每个branch都有自己的contacts。

假设我想在 POSTMAN 中看到一个特定的分支联系人：

https://................../api/branches/88fe-cc12-we33/contacts 88fe-cc12-we33 是一个分支ID。

现在在我的应用中。我通过对分支ID 进行硬编码，在称为联系人的组件中调用此特定的branch ID's 联系人 >像这样：

import { Component, Input, OnInit } from '@angular/core';
import {  IContact } from 'src/app/models/app.models';
import { CustomersService } from 'src/app/services/customers.service';
@Component({
  selector: 'asw-contacts',
  templateUrl: './contacts.component.html',
  styleUrls: ['./contacts.component.css'],
})
export class ContactsComponent  {
  public contacts: IContact[];

  constructor(public customersService: CustomersService) {} 

  public async ngOnInit(): Promise<void> {
    this.contacts = await this.customersService.getContactList('88fe-cc12-we33');<==========
    console.log(this.contacts);
  }


}

customers.services.ts文件

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';
import { IBranch, IContact } from 'src/app/models/app.models';

@Injectable({
  providedIn: 'root',
})

export class CustomersService {
 private  baseUrl : string = 'https://................../api/';
 constructor(private http: HttpClient) {
  }

 public getBranchesInfo(branchId : string): Promise<IBranch> {
  const apiUrl: string = 'https://................../api/branches/';
  return this.http.get<IBranch>(apiUrl + branchId).toPromise();
 }

  public async getContactList(branchId: string): Promise<IContact[]> <=======
  {
    const apiUrl: string = `${this.baseUrl}branches/${'branchId'}/contacts`;
    return this.http.get<IContact[]>(apiUrl).toPromise();
  }

}

我要基于选择的分支来呼叫联系人，而不是硬编码和呼叫一个分支联系人，所以我创建了一个组件称为分支，而我在下拉菜单中显示所有分支，如下图所示：

分支组件代码：

HTML

<mat-form-field>
  <mat-select placeholder="Select Branch">
   <mat-option *ngFor="let branch of branches" [value]="branch.id">
  {{branch.name}}
</mat-option>
  </mat-select>
</mat-form-field>

TS

import { Component, OnInit } from '@angular/core';
import { CustomersService } from 'src/app/services/customers.service';
import { IBranch } from 'src/app/models/app.models';

@Component({
  selector: 'asw-branch',
  templateUrl: './branch.component.html',
  styleUrls: ['./branch.component.css']
})
export class BranchComponent implements OnInit {
 public branches: IBranch[];

  constructor(public customersService: CustomersService) {} 

 public async ngOnInit(): Promise<void> {
    this.branches = await this.customersService.getBranchesInfo('');
  }

}

就像上面的代码一样，我在branches中显示所有dropdown，现在我想将选择的branch id发送给联系人组件到这里：

public async ngOnInit(): Promise<void> {
    this.contacts = await this.customersService.getContactList('');<==========
  }

因此它将基于发出的contacts来获取branch id。我知道我可以在parent到child组件通信中使用 @Input 方法，但是这里两个（分支和联系人）组件都是单独的组件。它们之间没有父母-孩子关系。我如何将id从branches组件传递到contacts组件？

Answer 1

据我所知，要在没有父子关系的组件之间共享数据，您需要创建服务。

在angular documentation中，您有一个代码示例。

此外，您还可以check this solution使用RxJS的BehaviorSubject。

Answer 2

使用服务，您可以订阅任何组件中的数据，并从应用程序中的任何组件发送数据。

例如参考： http://jasonwatmore.com/post/2018/06/25/angular-6-communicating-between-components-with-observable-subject