如何以角度 9 將表數據從一個組件推送/傳遞到另一個組件？

Question

當我單擊按鈕 (pushData()) 時，我想將表的數據（itemName、Quantity、retailRate 和 totalQuantity、totalPrice）推送/傳遞給另一個組件（getDataComponent）也導航到接收。 我無法在控制器中發送表數據。 這種方法是否適合通過導航將數據從一個組件發送到另一個組件...

HTML： * 發送.html*

        <table class="table table-hover table-sm"
          *ngIf="secondTableData.length">
           <thead>
             <tr class="table-primary">
               <td># </td>
               <td>Item</td>
               <td>Quantity</td>
               <td>Price</td>
               <td class="pull-right">Action</td>
           </tr>
       </thead>
       <tbody>
            <tr *ngFor="let newdata of secondTableData let i=index;">
               <td>{{i+1}}</td>           
               <td>{{ newdata.itemName }}</td>  <!--this data to push in receiveComponent -->
               <td class="text-center">{{ newdata.Quantity }}</td>   <!--this data to push in receiveComponent -->
               <td>{{ newdata.retailRate }}</td>  <!--this data to push in receiveComponent -->
              
            </tr>
        </tbody>
        <thead>
           <tr class="table-secondary">
               <td>#: {{ secondTableData.length }}</td> 
               <td></td>
               <td class="text-center">TQ: {{  totalQuantity }}</td>   <!--this data to push in receiveComponent -->
               <td>TP: {{ totalPrice }}</td>   <!--this data to push in receiveComponent -->
               <td></td>
            </tr>
        </thead>
      </table>
     <div>
       <hr>
       <button class="btn btn-primary pull-right"  (click)="pushData()">
           <i class="fa fa-check" aria-hidden="true"></i> OK
       </button>
      
     </div>
   </div>```

**Component.ts:** *sendComponent.ts*

   ```tabeTata:any 
       pushData(){
        let data:any = this.tabeTata.values;
        this.routerService.navigate(['./receive'],{
           queryParams:{data:JSON.stringify(data)}
        })
       }```

**receive.Html**  *here i am using random data for demo. I want to place received data to respective places*

   ```<table class="table table-bordered table-sm">
       <thead>
         <tr>
           <th>SN</th>
           <th>Product</th>
           <th>Unit</th>
           <th>Price</th>
           <th>Total</th>
         </tr>
       </thead>
       <tbody>
        <tr>
           <td>1</td>
           <td>Custom oil </td>
           <td>10</td>
           <td>34</td>
           <td>340</td>
        </tr>
         <tr>
           <td>2</td>
           <td>Digital illustraion </td>
           <td>12</td>
           <td>50</td>
           <td>600</td>
         </tr>
           <tr class="small" style="height: 10px;">
               <td colspan="3" style="border: none;"></td>
               <td>Gross Amount:</td>
               <td>1100</td>
           </tr>
           <tr class="small">
               <td colspan="3" style="border: none;"></td>
               <td>Discount:</td>
               <td>100</td>
           </tr>
           <tr class="small">
               <td colspan="3" style="border: none;"></td>
               <td>VAT</td>
               <td>30</td>
           </tr>
           <tr class="small">
               <td colspan="3" style="border: none;"></td>
               <td>Net Amont</td>
               <td>1030</td>
           </tr>
       </tbody>
    </table>
   ```

**receivecomponent.ts**

   ```data:any;
      ngOnInit(): void {
      // To get data from biling component
       this.route.queryParams.subscribe((params)=>{
        this.data = JSON.parse(params.data);
        console.log(params);
      })
    }```


**Any one is there to help, May be this one is complex**

Answer 1

嘗試在組件之間使用sharedService 。

這是通過服務進行“組件互通”的示例：

https://stackblitz.com/edit/angular-communication-3?file=app%2Fside-bar%2Fside-bar.service.ts

有關更多信息，請參閱本文“在 Angular 組件之間進行通信的 3 種方法”