子アイテムの親オブジェクトへのアクセス角2

Question

2つの異なるオブジェクトを使用するネストされたグリッドがあります。

<ul class="nav mg-pricing-batches"> 
      <li class="nav-item" *ngFor="let batch of batches"> 
       <a class="btn btn-danger mg-batch mg-batch-closed" (click)="openBatch(batch)" href="#"> 
        <i class="fa fa-plus fa-lg"></i> 
       </a> 
       <h5 class="d-inline-block ml-1">{{batch.callPointName}} - {{batch.startDate | date:"MMMM"}} {{batch.startDate | date:"yyyy"}}</h5> 
       <ul class="nav mg-batch-container" *ngIf="batch.showDetails"> 
        <li class="nav-item" *ngFor="let item of batch.pricingItems"> 
         <ul class="list-inline"> 
          <li class="list-inline-item"> 
           <div class="btn-group" role="group"> 
            <a class="btn btn-success btn-sm mg-batch-item mg-batch-item-closed" (click)="openItem(item)" href="#"> 
             <i class="fa fa-plus fa-lg"></i> 
            </a> 
            <a class="btn btn-danger btn-sm" (click)="reviewItem(item)" href="#"> 
             <i class="fa fa-edit fa-lg"></i> 
            </a> 
           </div> 
          </li> 
          <li class="list-inline-item mr-1"><h6>{{item.productName}}</h6></li> 
          <li class="list-inline-item"><strong>Package: </strong>{{item.package}}</li> 
          <li class="list-inline-item"><strong>Allowance Type</strong> {{item.allowanceTypeDescription}}</li> 
          <li class="list-inline-item"><strong>Frontline Cast Cost: </strong>{{item.frontLine| currency:'USD':true:'1.2-2'}}</li> 
          <li class="list-inline-item"><strong>Discount: </strong>{{item.discount| currency:'USD':true:'1.2-2'}}</li> 
          <li class="list-inline-item"><strong>Net Case Cost: </strong>{{item.discount| currency:'USD':true:'1.2-2'}}</li> 
         </ul> 
         <div class="panel mg-batch-item-container" *ngIf="item.showDetails"> 
          <div class="panel-body"> 
           <ul class="list-inline"> 
            <li class="list-inline-item"><strong>Single Unit Retail: </strong>{{item.retailPrice}}</li> 
            <li class="list-inline-item"><strong>Program Duration: </strong>{{item.startScanWeek | date:"dd/MM/yyyy"}} to {{item.endScanWeek | date: "dd/MM/yyyy"}}</li> 
            <li class="list-inline-item"><strong>On Promo/Ad: </strong>{{item.onPromo&& 'Yes' || 'No'}}</li> 
            <li class="list-inline-item" *ngIf="item.startScanWeek"><strong>Ad Week: </strong>{{item.startScanWeek | date:"dd/MM/yyyy"}} to {{item.endScanWeek | date: "dd/MM/yyyy"}}</li> 
            <li class="list-inline-item"><strong>Display/Mandatory: </strong>{{item.mandatoryDisplay}}</li> 
            <li class="list-inline-item"><strong>Optional Local Sell-In: </strong>{{item.localSellIn}}</li> 
            <li class="list-inline-item"><strong>POS/Coupons Type: </strong>{{item.couponType}}</li> 
            <li class="list-inline-item"><strong>POS Coupons Description: </strong>{{item.couponDescription}}</li> 
            <li class="list-inline-item"><strong>POS/Supplied By: </strong>{{item.couponSupplier}}</li> 
           </ul> 
          </div> 
         </div> 
        </li> 
       </ul> 
      </li> 
     </ul> 

したがって、バッチの配列があり、各バッチにはpricingItemの配列があります。このページでは、ボタンをクリックしてアイテムをレビューし、UIの「編集」ページを作成することができます。そのようなUIにはバッチ固有の情報があります。

<section *ngIf="selectedPricingItem"> 
<!-- Pricing Review Markup TO BE MOVED --> 
<h2 class="mt-3"> 
    {{item.createdBy}} 
    <span class="ml-1 small"> 
     Submitted {{item.createdDate}} 
    </span> 
</h2> 
<div class="row"> 
    <div class="col-xs-12 "> 
     <ul class="nav mg-pricing-batches"> 
      <li class="nav-item"> 
       <a class="btn btn-danger mg-batch mg-batch-closed" href="#"> 
        <i class="fa fa-lock fa-lg"></i> 
       </a> 
       <h5 class="d-inline-block ml-1">{{selectedItem.parent.callPointName}}</h5> 
      </li> 
     </ul> 
    </div> 
</div> 
</section> 

このコンポーネントを3つのコンポーネントに分割して値を渡すことはできませんか？

Answer 1

あなたの質問を理解できたかどうかは分かりませんが、同じ機能を使用してすべてのデータを渡すことができます。今、あなたは、編集ページに一括してアイテムを渡すことができ

<a class="btn btn-danger btn-sm" (click)="reviewItem(item, batch)" href="#"> 
    <i class="fa fa-edit fa-lg"></i> 
</a> 

：たとえば、reviewItem機能は次のように2つの引数を受け入れることができます。