如何在Angular兄弟组件间共享SigmaJS实例

核心思路：用共享服务+BehaviorSubject同步实例状态 #

父组件桥接@Input/@Output失败通常是因为Sigma实例创建/变更的时机无法被父组件及时捕获，改用全局共享服务配合RxJS的BehaviorSubject，可以自动同步实例的创建与更新，无需父组件作为中间层传递。

步骤1：创建Sigma共享服务 #

生成服务并通过BehaviorSubject保存实例，对外提供订阅接口和更新方法：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import type { Sigma } from 'sigma';

@Injectable({ providedIn: 'root' })
export class SigmaService {
  // 用BehaviorSubject保存实例，初始值为null
  private sigmaInstance$ = new BehaviorSubject<Sigma | null>(null);
  // 对外暴露可订阅的Observable
  public sigmaInstance$ = this.sigmaInstance$.asObservable();

  // 更新实例的方法，创建/变更时调用
  setSigmaInstance(instance: Sigma | null): void {
    this.sigmaInstance$.next(instance);
  }
}

步骤2：在Sigma组件中同步实例到服务 #

在sigma.component.ts中，实例创建或变更时调用服务的更新方法：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Sigma } from 'sigma';
import { SigmaService } from './sigma.service';

@Component({
  selector: 'app-sigma',
  templateUrl: './sigma.component.html',
  styleUrls: ['./sigma.component.css']
})
export class SigmaComponent implements OnInit, OnDestroy {
  constructor(private sigmaService: SigmaService) {}

  ngOnInit(): void {
    // 替换为你实际的Sigma实例创建代码
    const sigmaInstance = new Sigma(/* 你的配置参数 */);
    
    // 实例创建后同步到服务
    this.sigmaService.setSigmaInstance(sigmaInstance);
  }

  // 组件销毁时清理实例
  ngOnDestroy(): void {
    this.sigmaService.setSigmaInstance(null);
  }
}

步骤3：在Search组件中订阅实例 #

在search.component.ts中订阅服务的Observable，实时获取实例：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Sigma } from 'sigma';
import { SigmaService } from './sigma.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit, OnDestroy {
  private sigmaSub?: Subscription;
  public sigmaInstance: Sigma | null = null;

  constructor(private sigmaService: SigmaService) {}

  ngOnInit(): void {
    // 订阅实例变化，自动同步创建/更新
    this.sigmaSub = this.sigmaService.sigmaInstance$.subscribe(instance => {
      this.sigmaInstance = instance;
      
      // 实例可用时执行你的业务逻辑
      if (instance) {
        // 示例：调用Sigma API操作图谱
        const nodes = instance.getNodes();
        console.log('当前图谱节点数：', nodes.length);
      }
    });
  }

  // 组件销毁时取消订阅，避免内存泄漏
  ngOnDestroy(): void {
    this.sigmaSub?.unsubscribe();
  }
}

关键注意事项 #

• 实例变更时（比如重新初始化图谱），只需再次调用setSigmaInstance，所有订阅组件会自动同步最新实例
• 务必在组件销毁时清理实例并取消订阅，防止内存泄漏

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