如何以角度 9 将表数据从一个组件推送/传递到另一个组件？

Question

I want to push/pass data of table (itemName, Quantity, retailRate and totalQuantity , totalPrice ) to another component(getDataComponent) when I click button (pushData()) also navigate to receive. I am not able to send table data in controller. Is this approach is good to send data from one component to another with navigation...

HTML: * send.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

try using sharedService between components.

here is an example of 'Component Intercommunication' through services:

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

For more information resd this article '3 ways to communicate between Angular components'