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

问题描述

当我单击按钮（pushData（））也导航以接收时，我想将表的数据（itemName，Quantity，retailRate和totalQuantity和totalPrice）推送/传递到另一个组件（getDataComponent）。 我无法在控制器中发送表数据。这种方法是否可以通过导航将数据从一个组件发送到另一个组件？

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

解决方法

尝试在组件之间使用sharedService。

这是通过服务进行“组件互通”的示例：

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

有关更多信息，请重载本文'3 ways to communicate between Angular components'