角度版本 18 中的 Angular-Slickgrid

Question

我尝试按照 Slickgride 文档在 Angular 版本 18.0.0 中配置 Angular-Slickgrid。但我在 Chrome 浏览器中收到一个错误，指出 NullInjectorError: No provider for _ContainerService!

这是我的 Angular 版本 18 源代码导入语句和组件装饰器等

从“@angular/core”导入{组件}；

从'@angular/router'导入{RouterOutlet}；

从 'angular-slickgrid' 导入 { AngularSlickgridModule,Column, GridOption };

@组件 （ {

选择器：'应用程序根'，

独立：正确，

导入：[RouterOutlet，AngularSlickgridModule]，

templateUrl: './app.component.html',

styleUrl: './app.component.scss',

} )

任何线索出了什么问题，因为在 angualr 18 中，模块已被删除，因此我在组件本身中安装了每个依赖项。

Answer 1

应遵循的步骤！

首先安装

bootstrap

和

angular-slickgrid

npm install angular-slickgrid
npm install bootstrap

在

angular.json

中将样式添加到数组中！

        ...
        "styles": [
          ...
          "../node_modules/bootstrap/dist/css/bootstrap.css",
          "node_modules/@slickgrid-universal/common/dist/styles/css/slickgrid-theme-bootstrap.css"
          ...
        ],
        "scripts": [],
        ...

独立方法：

如果您的应用程序使用独立样式，请转到

app.config.ts

import {
  ApplicationConfig,
  importProvidersFrom,
  provideZoneChangeDetection,
} from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { AngularSlickgridModule } from 'angular-slickgrid';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    importProvidersFrom(AngularSlickgridModule.forRoot()), // <- notice!
  ],
};

然后将

AngularSlickgridModule

导入到

app.component.ts

import { RouterOutlet } from '@angular/router';
import { Component, OnDestroy, OnInit } from '@angular/core';
import {
  Column,
  GridOption,
  Formatters,
  AngularGridInstance,
  AngularSlickgridModule,
} from 'angular-slickgrid';

const NB_ITEMS = 995;

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, AngularSlickgridModule], // <- notice!
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {
    ...

那么你就可以出发了！

完整代码：

TS：

import { RouterOutlet } from '@angular/router';
import { Component, OnDestroy, OnInit } from '@angular/core';
import {
  Column,
  GridOption,
  Formatters,
  AngularGridInstance,
  AngularSlickgridModule,
} from 'angular-slickgrid';

const NB_ITEMS = 995;

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, AngularSlickgridModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {
  private _darkModeGrid1 = false;
  title = 'Example 1: Basic Grids';
  subTitle = `
    Basic Grids with fixed sizes (800 x 225) set by "gridHeight" & "gridWidth"
    <ul>
      <li><a href="https://ghiscoding.gitbook.io/angular-slickgrid/getting-started/quick-start" target="_blank">Wiki HOWTO link</a></li>
    </ul>
  `;

  angularGrid1!: AngularGridInstance;
  columnDefinitions1: Column[] = [];
  columnDefinitions2: Column[] = [];
  gridOptions1!: GridOption;
  gridOptions2!: GridOption;
  dataset1!: any[];
  dataset2!: any[];

  ngOnInit(): void {
    this.prepareGrid();
  }

  ngOnDestroy() {
    // document.querySelector('.panel-wm-content')!.classList.remove('dark-mode');
    // document.querySelector<HTMLDivElement>('#demo-container')!.dataset.bsTheme =
    //   'light';
  }

  angularGridReady1(angularGrid: AngularGridInstance) {
    this.angularGrid1 = angularGrid;
  }

  isBrowserDarkModeEnabled() {
    return window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
  }

  prepareGrid() {
    this.columnDefinitions1 = [
      { id: 'title', name: 'Title', field: 'title', sortable: true },
      {
        id: 'duration',
        name: 'Duration (days)',
        field: 'duration',
        sortable: true,
      },
      { id: '%', name: '% Complete', field: 'percentComplete', sortable: true },
      {
        id: 'start',
        name: 'Start',
        field: 'start',
        formatter: Formatters.dateIso,
      },
      {
        id: 'finish',
        name: 'Finish',
        field: 'finish',
        formatter: Formatters.dateIso,
      },
      {
        id: 'effort-driven',
        name: 'Effort Driven',
        field: 'effortDriven',
        sortable: true,
      },
    ];
    this._darkModeGrid1 = this.isBrowserDarkModeEnabled();
    this.gridOptions1 = {
      darkMode: this._darkModeGrid1,
      enableAutoResize: false,
      enableSorting: true,
      gridHeight: 225,
      gridWidth: 800,
    };

    // copy the same Grid Options and Column Definitions to 2nd grid
    // but also add Pagination in this grid
    this.columnDefinitions2 = this.columnDefinitions1;
    this.gridOptions2 = {
      ...this.gridOptions1,
      ...{
        darkMode: false,
        enablePagination: true,
        pagination: {
          pageSizes: [5, 10, 20, 25, 50],
          pageSize: 5,
        },
      },
    };

    // mock some data (different in each dataset)
    this.dataset1 = this.mockData(NB_ITEMS);
    this.dataset2 = this.mockData(NB_ITEMS);
  }

  mockData(count: number) {
    // mock a dataset
    const mockDataset = [];
    for (let i = 0; i < count; i++) {
      const randomYear = 2000 + Math.floor(Math.random() * 10);
      const randomMonth = Math.floor(Math.random() * 11);
      const randomDay = Math.floor(Math.random() * 29);
      const randomPercent = Math.round(Math.random() * 100);

      mockDataset[i] = {
        id: i,
        title: 'Task ' + i,
        duration: Math.round(Math.random() * 100) + '',
        percentComplete: randomPercent,
        start: new Date(randomYear, randomMonth + 1, randomDay),
        finish: new Date(randomYear + 1, randomMonth + 1, randomDay),
        effortDriven: i % 5 === 0,
      };
    }

    return mockDataset;
  }

  toggleDarkModeGrid1() {
    this._darkModeGrid1 = !this._darkModeGrid1;
    if (this._darkModeGrid1) {
      document.querySelector('.grid-container1')?.classList.add('dark-mode');
    } else {
      document.querySelector('.grid-container1')?.classList.remove('dark-mode');
    }
    this.angularGrid1.slickGrid?.setOptions({ darkMode: this._darkModeGrid1 });
  }
}


### HTML:

<angular-slickgrid
  gridId="grid2"
  [columnDefinitions]="columnDefinitions2"
  [gridOptions]="gridOptions2"
  [dataset]="dataset2"
>
</angular-slickgrid>

Stackblitz 演示 -> cd 测试 ->

npm i

->

npm run start