Angular 在两个不相关的组件之间通信数据

我有一个无序列表中显示的存储列表，当初始化该列表时，

ngOnInit（）

函数返回所有存储的数据。单击每个列表元素时，我希望将存储数据发送到存储详细信息组件，以便它能够计算出要显示的适当数据。由于这两个组件不遵循父/子关系，我如何做到这一点？我是Angular最新版本的新手，所以我不确定，也许发射器或Rxjs是最好的选择

我的模板：

<li class="nav-item">
    <div class="dropdown {{showMenu ? 'show' : ''}}">
        <button (click)='toggleMenu()' class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="">
          Stores
        </button>
        <div class="dropdown-menu {{showMenu ? 'show' : ''}}" aria-labelledby="dropdownMenu2">
          <button (click)="clickStore()" class="dropdown-item" type="button" [routerLink]="['/store/1']">Store 1</button>
          <button (click)="clickStore()" class="dropdown-item" type="button" [routerLink]="['/store/2']">Store 2</button>
          <button (click)="clickStore()" class="dropdown-item" type="button" [routerLink]="['/store/3']">Store 3</button>
          <button (click)="clickStore()" class="dropdown-item" type="button" [routerLink]="['/store/4']">Store 4</button>
          <button (click)="clickStore()" class="dropdown-item" type="button" [routerLink]="['/store/5']">Store 5</button>
          <button (click)="clickStore()" class="dropdown-item" type="button" [routerLink]="['/store/6']">Store 6</button>
          <button (click)="clickStore()" class="dropdown-item" type="button" [routerLink]="['/store/7']">Store 7</button>
          <button (click)="clickStore()" class="dropdown-item" type="button" [routerLink]="['/store/8']">Store 8</button>
          <button (click)="clickStore()" class="dropdown-item" type="button" [routerLink]="['/store/9']">Store 9</button>
          <button (click)="clickStore()" class="dropdown-item" type="button" [routerLink]="['/store/10']">Store 10</button>
          <button (click)="clickStore()" class="dropdown-item" type="button" [routerLink]="['/store/11']">Store 11</button>
          <button (click)="clickStore()" class="dropdown-item" type="button" [routerLink]="['/store/12']">Store 12</button>
        </div>
    </div>  
</li>

我的店铺详细信息组件：

ngOnInit() {
    this.storeService.getStores().subscribe({ 
        next: stores => {
            this.stores = stores;
        },
        error: err => this.errorMessage = err
    });
}



clickStore(): void {
    console.log(this.stores);
    // send "this.stores" to store detail component
}

export class StoreDetailComponent implements OnInit {

  retrieveStoreData(): void {
     // get data from store list component and assign to this.stores
  }


   displayStore(): void {
       let id = +this.route.snapshot.paramMap.get('id');

       for(let i=0;i<this.stores.length; i++){
          if(this.stores[i].storeId == id){
            this.store = this.stores[i];
          }
       }
   }


}

---

您应该使用服务在本地属性中检索和存储数据。这样，您就可以通过将服务注入组件来访问它。是的，状态管理解决方案是可行的，但是对于这样一个简单的用例，一个简单的可注入服务就可以做到这一点

您应该使用服务在本地属性中检索和存储数据。这样，您就可以通过将服务注入组件来访问它。是的，状态管理解决方案是可行的，但是对于这样一个简单的用例，一个简单的可注入服务就可以做到这一点

您已经这样做了：您在URL中传递了商店的D，细节组件使用这个ID来获取商店的细节。调用一个新方法

this.storeService.getStore（storeId）

从您的服务中获取存储的详细信息。details组件不需要存储列表。它需要商店的详细信息才能显示出来display@JBNizet这是假设他有一个端点来检索一个按id存储（我知道这或多或少是正常的，但仍然如此），并且列表中没有他需要的所有数据，因此他不需要额外的http请求来获取详细信息。在这种情况下，理想的做法是将列表存储在服务中，并通过将其注入details组件来检索它。如果列表仍然存储在服务中，请调用

this.storeService.getStore（storeId）

，让服务通过查看列表内部返回请求的存储。无论服务每次检索列表，还是缓存列表，或者点击单独的端点以获取某个存储的详细信息，都应该与组件无关：它应该始终通过询问服务来获取存储。这是公平的，你是对的。我们说了很多相同的事情，但是你说的是正确的，你所说的并不排除它。非常感谢你的帮助。我现在让它工作了。非常感谢：）您已经这样做了：您在URL中传递了商店的D，详细信息组件使用此ID获取商店的详细信息。调用一个新方法

this.storeService.getStore（storeId）

从您的服务中获取存储的详细信息。details组件不需要存储列表。它需要商店的详细信息才能显示出来display@JBNizet这是假设他有一个端点来检索一个按id存储（我知道这或多或少是正常的，但仍然如此），并且列表中没有他需要的所有数据，因此他不需要额外的http请求来获取详细信息。在这种情况下，理想的做法是将列表存储在服务中，并通过将其注入details组件来检索它。如果列表仍然存储在服务中，请调用

this.storeService.getStore（storeId）

，让服务通过查看列表内部返回请求的存储。无论服务每次检索列表，还是缓存列表，或者点击单独的端点以获取某个存储的详细信息，都应该与组件无关：它应该始终通过询问服务来获取存储。这是公平的，你是对的。我们说了很多相同的事情，但是你说的是正确的，你所说的并不排除它。非常感谢你的帮助。我现在让它工作了。非常感谢：）

ID: {{store.storeId}}

Name: {{store.storeName}}

Description: {{store.storeDescription}}