angular - angular 2 別の *.ts コンポーネントへの参照

Question

Angular 2 Hero Example を ag-grid SampleAppComponent に拡張しようとしています。車の価格を編集できる @input を使用して CarDetailComponent を作成しました。変更された車の価格値はバインドされ、変更はグリッドの RowData に反映されますが、グリッドに反映するには、グリッドに明示的な更新呼び出しが必要です。この呼び出しは、ユーザーが別の行をクリックしたときに含めました。次に、グリッドに価格の新しい値が表示されます。 今CarDetailComponent @input の「onKey」関数内からリフレッシュ グリッド呼び出しが発生するようにします。私の問題は、CarDetailComponent から SampleAppComponent のインスタンスを参照できないことです。SampleAppComponentをparamにしてコンストラクタを試してみたのですが、「循環参照エラー」になりました。@Autowired も機能しませんでした: prop sampleAppComponent は未定義のままです。提供された手がかりは大きな助けになります。以下はコードです。 car-detail.component.ts :

 import {Component, Input} from 'angular2/core';
    import {Car} from './car';
    import {SampleAppComponent} from './SampleAppComponent';

    import {Bean} from 'ag-grid/main';
    import {Autowired} from 'ag-grid/main';



    @Component({
      selector: 'my-car-detail',
      template: `
        <div *ngIf="car">
          <h2>{{car.make}} details</h2>
          <div>
            <label>Model: </label>{{car.model}};
            <label> Year: </label>{{car.year}}
          </div>
          <div>
            <label>Price: </label>
            <input [(ngModel)]="car.price" placeholder="price" (keyup)="onKey($event)"/>
          </div>
        </div>
      `,

    })

    @Bean('CarDetailComponent')
    export class CarDetailComponent {
      @Autowired('sampleAppComponent') private sampleAppComponent: SampleAppComponent;

          @Input() car: Car;

           onKey(event:KeyboardEvent) {
            console.log((<HTMLInputElement>event.target).value) ;
            this.sampleAppComponent.gridOptions.api.refreshView(); // this.sampleAppComponent is undefined !!!
          }
        }

    **SampleAppComponent.ts**
import {Component} from 'angular2/core';
import {AgGridNg2} from 'ag-grid-ng2/main';
import {GridOptions} from 'ag-grid/main';
import {GridOptionsWrapper} from 'ag-grid/main';
import {GridApi} from 'ag-grid/main';
import {Car} from './car';
import {CarService} from './car.service';
import {CarDetailComponent} from './car-detail.component';
import 'ag-grid-enterprise/main';
import {Utils as _} from 'ag-grid/main';

import {Bean} from 'ag-grid/main';

import {PostConstruct} from "ag-grid/main";

var carService: CarService;

console.log("Component start");
@Component({
    selector: 'app',
    template: `<ag-grid-ng2 
               class="ag-fresh" style="height: 300px"  
               [columnDefs]="columnDefs" 
               [rowData] = "rowData"
               [enableColResize]="true"
               [singleClickEdit]="true"
               [enableSorting]="true"
               [enableRangeSelection]="true"
               (rowClicked)="onRowClicked($event)"
               (cellValueChanged)="onKey($event)"
               [gridOptions]="gridOptions"
               >
               </ag-grid-ng2>
               <ul class="cars">
                 <li *ngFor="#car of cars"
                   [class.selected]="car === selectedCar"
                   (click)="onSelect(car)">
                   <span class="badge">{{car.make}}</span> {{car.price}}
                 </li>
               </ul>
               <my-car-detail [car]="selectedCar"></my-car-detail>   
              `,

    directives: [AgGridNg2, CarDetailComponent],
    providers: [CarService]
})

@Bean('SampleAppComponent')
export class SampleAppComponent {
   public gridOptions: GridOptions;

    private rowData: Object[];
    selectedCar: Car;
    private eRoot: HTMLElement;
    private api: GridApi;

     onRowClicked(event: Event) {
        var currentRow: Car;
        currentRow = <Car> event.data;
        this.selectedCar = currentRow; 
        console.log('a row was clicked; row make: ' + currentRow.make + ', model: ' + currentRow.model + ', price: ' + currentRow.price + ", year: " + currentRow.year);  
        this.gridOptions.api.refreshView(); 

    }

    onKey(event:KeyboardEvent){
       console.log("onKey Output: " + (<HTMLInputElement>event.target).value);
       this.gridOptions.api.refreshView();
    }

    constructor(private _carService: CarService) {
     console.log("in Grid constructor...");   
     carService = this._carService;

     this._carService.getCars().then(CARS => this.rowData = CARS);




    this.gridOptions = {
        enableSorting: true,
        rowData: this.rowData,
        onReady: () => {
            this.gridOptions.api.sizeColumnsToFit();
            alert(this.gridOptions.api);
        }
     }



   };


    @PostConstruct
    public init(): void {
         console.log("in Grid POST constructor..."); 
    }

   columnDefs = [
        { headerName: "Make", field: "make" },
        { headerName: "Model", field: "model" },
        {
            headerName: "Price",
            field: "price",
            cellClass: 'rightJustify',
            cellRenderer: function (params: any) {
                return '$' + params.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); //thanks http://stackoverflow.com/users/28324/elias-zamaria
            }
        },
        { headerName: "Year", field: "year" },
    ];


onSelect(car: Car) { 
  this.selectedCar = car; 
  console.log('a car was selected; car: make: ' + car.make + ', model: ' + car.model + ', price: ' + car.price + ", year: " + car.year);   
 };
}