在两个不相关的组件之间传递数据答案

【问题标题】：Communicating data between two unrelated components在两个不相关的组件之间传递数据
【发布时间】：2020-02-12 15:22:12
【问题描述】：

我有一个显示在无序列表中的商店列表，当初始化此列表时，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];
          }
       }
   }


}

在商店详细信息模板中，我只想显示商店数据：

ID: {{store.storeId}}

Name: {{store.storeName}}

Description: {{store.storeDescription}}

【问题讨论】：

你已经在这样做了：你在 URL 中传递 store 的 D，detail 组件使用这个 ID 来获取 store 的详细信息。调用新方法this.storeService.getStore(storeId) 从您的服务中获取商店的详细信息。详细信息组件不需要商店列表。它需要显示商店的详细信息
@JBNizet 假设他有一个通过 id 检索商店的端点（我知道这或多或少是常态，但仍然如此）并且列表中没有他需要的所有数据，并且所以他不需要额外的http请求来获取详细信息。在这种情况下，理想的做法是将列表存储在服务中，然后通过将其注入到 details 组件中来检索它。
没有。如果列表仍然存储在服务中，请调用this.storeService.getStore(storeId) 并让服务通过查看列表内部来返回请求的存储。服务是否每次都检索列表，或者缓存列表，或者点击单独的端点来获取一个商店的详细信息，都应该与组件无关：它应该总是通过询问服务来获取商店。
这很公平，你是对的。我们所说的大部分内容都是一样的，但你说的是对的，你所说的并不排除它。
非常感谢您的帮助。我已经让它工作了。非常感谢:)

标签： angular

【解决方案1】：

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

【讨论】：