eckig 2 Verweis auf eine andere * .ts Komponente

Question

Ich versuche, Angular 2 Hero Beispiel zu ag-grid SampleAppComponent zu erweitern. Ich habe CarDetailComponent mit @input erstellt, mit dem ich den Autopreis bearbeiten kann. An den RowData-Wert des Gitters wird der geänderte Wert des Fahrzeugpreises gebunden, und die Änderungen werden berücksichtigt. Damit er jedoch im Gitternetz widergespiegelt wird, sollte ein expliziter Auffrischungsaufruf auf dem Gitter erfolgen. Dieser Anruf wurde hinzugefügt, wenn der Benutzer ein anderes Mal auf eine Zeile klickt. Dann sehen Sie einen neuen Wert für den Preis im Raster. Jetzt Ich möchte, dass Grid-Aufruf von innerhalb "onKey" -Funktion von CarDetailComponent @ Eingang auftreten. Mein Problem ist, dass ich nicht von CarDetailComponent die Instanz von SampleAppComponent referenzieren kann. Ich habe versucht, Konstruktor mit SampleAppComponent als Parameter, aber bekam "circular reference error". @Autowired hat auch nicht funktioniert: Prop SampleAppComponent bleibt undefiniert. Jeder Hinweis wäre eine große Hilfe. Unten ist der Code. Auto-detail.component.ts:

export class CarDetailComponent { 
    (...) 
    @Input() car: Car; 

    @Output() updated:EventEmitter = new EventEmitter(); 
    (...) 

    onKey(event:KeyboardEvent) { 
    console.log((<HTMLInputElement>event.target).value) ; 
    this.updated.emit(); 
    } 
} 

In der Vorlage der Sie SampleAppComponent Komponente auf dieses Ereignis abonnieren:

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); 
}; 
} 

Answer 1

Ich würde eine @Ouput in ihr Auto Details Komponente definieren:

<my-car-detail (updated)="refreshGrid()" [car]="selectedCar"></my-car-detail> 

das Raster zu aktualisieren: