在兩個不相關的組件之間傳遞數據

Question

我有一個顯示在無序列表中的商店列表，當初始化此列表時， ngOnInit() function 返回所有商店的數據。 單擊每個列表元素時，我想將商店數據發送到商店詳細信息組件，以便它可以計算出要顯示的適當數據。 由於這兩個組件不遵循父/子關系，我該怎么做？ 我是最新版本的 Angular 的新手，所以我不確定，也許是發射器或 Rxjs 是 go 的方式？

我的模板：

<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}}

Answer 1

您應該使用服務來檢索數據並將其存儲在本地屬性中。 這樣，您可以通過將服務注入組件來訪問它。 state 管理解決方案可以工作，是的，但是對於這樣一個簡單的用例，一個簡單的可注入服務就可以解決問題。