Question

我试图将Angular 2 Hero示例扩展为ag-grid SampleAppComponent。我用@input创建了CarDetailComponent，允许我编辑汽车价格。修改后的汽车价格值受到约束，并且更改会反映在网格的RowData上，但为了使其反映在网格上，网格上应该有明确的刷新调用。当用户再次点击一行时，我会包含此调用。然后你会看到网格中价格的新价值。现在我希望刷新网格调用发生在＆＃34; onKey＆＃34; CarDetailComponent @input的功能。我的问题是我无法从CarDetailComponent引用SampleAppComponent的实例。我尝试使用SampleAppComponent构造函数作为参数，但得到了＃34;循环引用错误＆＃34;。 @Autowired也没有工作：prop sampleAppComponent reined undefined。任何提供的线索都会有很大的帮助。下面是代码。的轿厢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);   
 };
}

Answer 1

我会在您的汽车详细信息组件中定义@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();
  }
}

angular 2引用另一个* .ts组件

1 个答案: