Angular多组件实例属性互扰问题排查与求助

问题根源：单例服务的共享状态冲突 #

从你提供的代码和场景描述来看，核心问题出在模块级注册的单例服务上。你在AngularSlickgridModule.forRoot()里注册了一系列服务（比如GridEventService、SharedService、SortService等），这些服务默认是应用级单例——也就是说，整个应用里所有angular-slickgrid组件实例都会共享同一个服务实例。

当你创建第二个网格组件时，这些单例服务内部的状态（比如当前绑定的网格实例引用）会被第二个组件覆盖，导致后续所有方法调用（比如clearSort()）都会指向最后创建的那个网格实例，出现你遇到的“第一个组件方法影响第二个网格”的异常。

另外，你的AngularSlickgridComponent上标注了@Injectable()，这其实是多余的——@Component装饰器已经隐含了可注入特性，除非你需要把这个组件当作服务注入到其他地方，否则这个装饰器可以移除（不过这不是核心问题）。

解决方法：让服务与组件实例绑定 #

要让每个网格组件完全独立，需要确保和组件实例强相关的服务，每个组件都拥有自己的实例。具体可以这样做：

1. 将组件相关服务移至组件级providers

把那些持有网格实例状态、处理组件内部逻辑的服务（比如GridEventService、SortService、FilterService等），从模块的forRoot()提供者中移除，转而添加到AngularSlickgridComponent的providers数组里：

@Component({
  selector: 'angular-slickgrid',
  templateUrl: './angular-slickgrid.component.html',
  providers: [
    ResizerService,
    GridEventService,
    SortService,
    FilterService,
    GridStateService,
    // 其他和单个网格实例绑定的服务
  ]
})
export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnInit {
  // ... 组件代码
}

这样每个组件实例初始化时，都会创建这些服务的新实例，状态不再共享。

2. 保留全局共享服务在模块级

对于那些不需要和单个组件绑定的全局工具类服务（比如ExportService、OdataService），可以继续留在forRoot()的提供者中，保持单例即可。

3. 移除组件上多余的@Injectable()

如前所述，@Component已经具备可注入能力，所以去掉组件类上的@Injectable()装饰器：

// 移除这一行 @Injectable()
@Component({
  // ... 组件配置
})
export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnInit {
  // ...
}

4. 验证服务作用域

修改后，你可以在相关服务的构造函数里加个日志，比如：

@Injectable()
export class GridEventService {
  constructor() {
    console.log('GridEventService instance created');
  }
  // ...
}

当你创建两个网格组件时，控制台应该输出两次这个日志，说明每个组件都有自己的服务实例，状态不会再被覆盖。

额外建议：利用gridId强化隔离 #

你已经在模板里给每个网格指定了gridId，可以在组件和服务里利用这个ID来进一步隔离状态，比如在服务里维护一个以gridId为键的状态映射，确保每个网格的操作只作用于自身对应的状态。

内容的提问来源于stack exchange，提问作者ghiscoding