角2引用另一個* .ts組件

我想將Angular 2英雄示例擴展到ag-grid SampleAppComponent。我用@input創建了CarDetailComponent，允許我編輯汽車價格。修改後的汽車價格值是必然的，並且變化反映在網格的RowData上，但爲了將其反映在網格上，應該在網格上進行明確的刷新調用。這個電話是我在另一次用戶點擊一行時包含的。然後你看到價格在網格中的新價值。現在我想刷新網格調用發生在CarDetailComponent @input的「onKey」函數內。我的問題是我不能從CarDetailComponent引用SampleAppComponent的實例。我嘗試使用SampleAppComponent構造函數作爲參數，但得到了「循環引用錯誤」。 @Autowired也沒有工作：prop sampleAppComponent remained undefined。提供的任何線索都會有很大的幫助。下面的代碼。 車detail.component.ts：角2引用另一個* .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); 
}; 
}

來源

2016-04-22 code16

我會定義你的車的細節部分的@Ouput：

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

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

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

在SampleAppComponent組件，您可以在此事件訂閱的模板：

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

刷新網格：

@Component({ ... }) 
export class SampleAppComponent { 
    (...) 
    refreshGrid() { 
    this.gridOptions.api.refreshView(); 
    } 
}

來源

2016-04-23 12:25:45

角2引用另一個* .ts組件

回答

相關問題