您如何在 ag-grid 模块中使用多个组件？

Question

我正在尝试使用 ag-grid 和模块将数据集放在单独的组件上。

与教程相反，它显示仅在应用程序模块中导入导入 AgGridModule...

 import { AgGridModule } from 'ag-grid-angular';

然后像这样把数据放到app组件中……

 columnDefs = [
        { field: 'make' , sortable: true},
        { field: 'model' , sortable: true},
        { field: 'price', sortable: true }
    ];
    rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 },
    ];

然后将标签组件放入HTML应用页面并放入所需的属性。

我想知道/希望这可以通过应用模块中的某些内容来完成，如下所示：

  AgGridModule.withComponents([CarsComponent, 
  TrucksComponent
  ]),

然后在每个组件中放入所需的数据，例如，在 CarsComponent 中

export class CarsComponent implements OnInit { ..../
columnDefs = [
    { field: 'make' , sortable: true},
    { field: 'model' , sortable: true},
    { field: 'price', sortable: true }
];
rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 },
 ];

然后在 TrucksComponent ...

export class TrucksComponent implements OnInit { ..../
   columnDefs = [
    { field: 'make' , sortable: true},
    { field: 'model' , sortable: true},
    { field: 'price', sortable: true }
    ];

  rowData = [
    { make: 'Chevy', model: 'Silverado', price: 38000 },
    { make: 'Ford', model: 'F350', price: 41000 },
    { make: 'Dodge', model: 'Ram', price: 36500 }
   ];

然后像这样在每个 HTML 组件文件中放置单独的 ag-gr-d 标签...

              <ag-grid-angular
              style="width: 500px; height: 220px;"
              class="ag-theme-alpine"
              [rowData]="rowData"
              [columnDefs]="columnDefs">
              </ag-grid-angular>

这可以吗？我是在正确的轨道上，还是只是假设它以这种方式工作？我在 ag-grid 网站上找不到真正清晰的文档或引用此内容的示例。

我将该信息添加到预期的 Cars 组件之一 - 组件中的 rowData 和 HTML 中的 ag-grid 模板框，并收到以下错误：

   ERROR in src/app/carsprods/carsprods.component.html:28:30 - error TS2339: Property 'rowData' does not exist on type 'CarsprodsComponent'.

28                   [rowData]="rowData"
                                ~~~~~~~
  src/app/carsprods/carsprods.component.ts:6:15
    6   templateUrl:'carsprods.component.html',
                    ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component CarsprodsComponent.
src/app/carsprods/carsprods.component.html:29:33 - error TS2339: Property 'columnDefs' does not exist on type 'CarsprodsComponent'.
 [columnDefs]="columnDefs">
                                   ~~~~~~~~~~
  src/app/carsprods/carsprods.component.ts:6:15
    6   templateUrl:'carsprods.component.html',
                    ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component CarsprodsComponent.

Answer 1

当你说

 AgGridModule.withComponents([CarsComponent, TrucksComponent])

这意味着这些组件将被使用BY ag-grid;可以作为cellRenderer、编辑器组件、过滤器组件等。

如果你想使用ag-gridWITHIN你的CarsComponent或TrucksComponent，那么你不需要用AgGridModule.withComponents声明它们。