角度4中從一個分量到另一個分量的數據

Question

我想將數據從一個組件共享到另一組件。

我在list.component（URL路徑：設置/列表）中有一個像這樣的表

當我單擊“查看/編輯”按鈕時，它將轉到其他選定的組件。component（URL路徑：settings / selected），它顯示所選行的詳細信息，例如其名稱，電子郵件地址。

list.component.ts

  getAccountsList() {
    this.http.get<Company>(environment.company,
      { headers: new HttpHeaders({ 'Authorization': 'bearer localStorage.getItem("jwt_token")' }) })
      .subscribe(data => {
        this.company = data;
        console.log(data);
      });
  }

  // Memory optimization trick
  userThumb(index, company) {
    return company ? company.id : undefined;
  }

list.component.html

    <tr *ngFor="let companyData of company?.companies.data; trackBy: userThumb">
                                <td class="text-truncate">{{companyData?.name }}</td>

</tr>

Answer 1

對於要選擇項目的項目 列表 ，我個人更喜歡在路徑上傳遞所選項目的ID。 這很簡單，並且在Angular文檔中有很好的解釋。

你需要做什么

在列表組件上 ：-選擇ViewEdit時，將獲取所選項目的ID並將其放在路徑上

 goToItemDetails(id) {
  this.router.navigate(['/item-details', id]);
}

在詳細信息Component上：初始化組件時，將獲得設置的ID

ngOnInit() {
   this.route.params.subscribe(params => {
       this.id = +params['id'];
       // a service that calls item by it's id from the database
    });

您可以在此鏈接上找到更多詳細信息