Javascript 角度/类型脚本，当使用多个组件时，第一个组件影响第二个组件

我创建了一个库，它是

jQuery

数据网格库的包装，并且是开源的。当页面上只有一个网格（组件）时，这一切都能很好地工作，但是当我想在同一页面上创建其中两个组件（相同的选择器）时，我开始出现很多奇怪的行为。我可以看到的行为是，第一个函数中的某些函数会影响第二个网格。我可以单独处理服务，但在我的例子中，实际上是组件的属性被最后创建的组件覆盖，这是为什么？我认为每个角度组件都是完全独立的（除了服务），那么我做错了什么

我使用

ngpackagr

创建我的库，组件的

ngModule

如下

@NgModule({
  imports: [
    CommonModule,
    TranslateModule
  ],
  declarations: [
    AngularSlickgridComponent,
    SlickPaginationComponent
  ],
  exports: [
    AngularSlickgridComponent,
    SlickPaginationComponent
  ],
  entryComponents: [AngularSlickgridComponent]
})
export class AngularSlickgridModule {
  static forRoot(config: GridOption = {}) {
    return {
      ngModule: AngularSlickgridModule,
      providers: [
        {provide: 'config', useValue: config},
        CollectionService,
        ControlAndPluginService,
        ExportService,
        FilterService,
        GraphqlService,
        GridEventService,
        GridExtraService,
        GridOdataService,
        GridStateService,
        GroupingAndColspanService,
        OdataService,
        ResizerService,
        SharedService,
        SortService
      ]
    };
  }
}

组件类以

@Injectable()
@Component({
  selector: 'angular-slickgrid',
  templateUrl: './angular-slickgrid.component.html',
  providers: [ResizerService]
})
export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnInit {

然后在我的应用程序中，我像这样调用外部网格模块

imports: [
  AppRoutingRoutingModule,
  BrowserModule,
  HttpClientModule,
  TranslateModule.forRoot({
    loader: {
      provide: TranslateLoader,
      useFactory: (createTranslateLoader),
      deps: [HttpClient]
    }
  }),
  AngularSlickgridModule.forRoot({
    // add any Global Grid Options/Config you might wantApp
    enableAutoResize: true
  })
],

    <angular-slickgrid gridId="grid1"
          [columnDefinitions]="columnDefinitions"
          [gridOptions]="gridOptions"
          gridHeight="200"
        gridWidth="800"
          [dataset]="dataset">
</angular-slickgrid>

<hr>

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

然后我可以像这样在视图中创建两个栅格

imports: [
  AppRoutingRoutingModule,
  BrowserModule,
  HttpClientModule,
  TranslateModule.forRoot({
    loader: {
      provide: TranslateLoader,
      useFactory: (createTranslateLoader),
      deps: [HttpClient]
    }
  }),
  AngularSlickgridModule.forRoot({
    // add any Global Grid Options/Config you might wantApp
    enableAutoResize: true
  })
],

    <angular-slickgrid gridId="grid1"
          [columnDefinitions]="columnDefinitions"
          [gridOptions]="gridOptions"
          gridHeight="200"
        gridWidth="800"
          [dataset]="dataset">
</angular-slickgrid>

<hr>

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

编辑2
经过这么长时间，我发现这与单身人士的服务有关。下面回答了我自己的问题。希望这能帮助其他面临类似问题的人

请参见下面的行为，查看数据和蓝色排序图标，所有这些都发生在第二个网格上，而我在第一个网格上执行操作

两个组件实例，即使是同一个组件类，也应该有自己的作用域。如果它们没有声明为静态，则它们的变量是封装的和唯一的

您确定dataset和dataset2不共享同一引用吗？避免以下情况，即使是测试：

private dataset = [data1, data2];
private dataset2 = dataset;

如果将dataset和dataset2输入到两个不同的组件中，则将强制执行所描述的weired行为

您正在包装一个jquery插件，它本身就是纯javascript。也许包装好的javascript取消了angulars组件的作用域

您确定组件实例不会错误地按服务共享数据吗？
哇，我发现了问题，我没想到我发现了问题。。。我的库中没有
提供者
，因此所有服务都是作为单例服务的。因此，任何服务函数调用都使用上次创建的网格的内部变量（
grid
，
gridOptions
，
dataView
）。因此，为了解决这个问题，我必须做的唯一一件事就是向
提供者
数组提供所有服务

之前

@Injectable()
@Component({
  selector: 'angular-slickgrid',
  templateUrl: './angular-slickgrid.component.html',
  providers: [ResizerService]
})

导出类AngularSlickgridComponent实现AfterViewInit、OnDestroy和OnInit{

之后

@Injectable()
@Component({
  selector: 'angular-slickgrid',
  templateUrl: './angular-slickgrid.component.html',
  providers: [
    ControlAndPluginService,
    ExportService,
    FilterService,
    GraphqlService,
    GridEventService,
    GridExtraService,
    GridStateService,
    GroupingAndColspanService,
    ResizerService,
    SortService
  ]
})
export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnInit {

哦，我的天……这么简单的事情浪费了这么多时间
我更新了我的问题，为所有必要的代码提供了链接。问题不在于数据集，而是
网格
，
网格选项
&
数据视图
对象似乎都被共享（覆盖）我不明白为什么。两个网格的应用程序似乎没有共享任何内容。从第一个网格到第二个网格的清晰排序，不仅是数据集wize，而且是排序图标&在第二个网格而不是第一个网格中消失的数据