如何在Angular全应用范围内共享生成的Block类实例

你这个场景是自举的嵌入式根元素，整个应用的依赖注入作用域本来就和这个<block-element>元素绑定，直接用Angular自带的根注入器单例机制就能实现全局共享，完全没必要搞手动挂全局变量这种容易出问题的野路子。

最通用、维护成本最低的方案：根级单例服务持有实例 #

这是Angular生态里跨组件共享实例最稳的标准写法，不会出各种奇奇怪怪的单例失效问题，完全适配你这种根组件接收外部输入、后续全应用用同一个实例的场景。

1. 创建全局单例服务
   这个服务会被根注入器管理，整个Angular应用生命周期内只存在一个实例，专门用来存你生成的Block对象：

   import { Injectable } from '@angular/core';
   // 导入你项目里的Block类和props类型
   import { Block } from './path/to/block.class';
   import { ReonMapProps } from './path/to/props.type';
   
   @Injectable({ providedIn: 'root' })
   export class BlockSharedService {
     // 内部存储真实的Block实例，初始为空
     private _block: Block | null = null;
   
     /**
      * 初始化Block实例，做幂等处理避免重复生成
      */
     initBlock(props: ReonMapProps) {
       if (this._block) return;
       this._block = new Block(props);
     }
   
     /**
      * 对外提供获取实例的入口，加判空避免未初始化就访问
      */
     get block(): Block {
       if (!this._block) {
         throw new Error('Block实例未初始化：请确认根组件已完成props接收流程');
       }
       return this._block;
     }
   }
   

2. 改造原来的根组件逻辑
   把原来组件内部直接new Block的逻辑，替换成调用服务的初始化方法，不再把Block存在组件自己的成员变量里：

   @Component({
       selector: 'block-element',
       templateUrl: './block-element.component.html',
       styleUrls: ['./block-element.component.scss'],
   })
   export class BlockElementComponent implements OnInit {
       // 删除原来的 public block: Block 成员变量
       @Input() props: ReonMapProps = {};
   
       // 注入刚才创建的全局共享服务
       constructor(private blockSharedService: BlockSharedService) {}
   
       ngOnInit() {
           // 替换原来的 this.block = new Block(this.props) 逻辑
           this.blockSharedService.initBlock(this.props)
       }
   }
   

3. 全应用范围内的使用方式
   不管是其他层级的组件、路由页面、独立的服务，只要注入这个BlockSharedService，就能拿到同一个Block实例，不需要层层传递输入参数：

   // 示例：某个深层子组件里直接使用
   @Component({...})
   export class SomeDeepChildComponent {
     constructor(private blockSharedService: BlockSharedService) {
       // 直接拿全局共享的Block实例使用
       const currentBlock = this.blockSharedService.block;
     }
   }
   

可选增强：支持实例更新通知 #

如果后续存在外部传入的props变化、需要重新生成Block实例的场景，可以在共享服务里加一个响应式流，让订阅了的其他组件能自动收到实例更新，不需要手动刷新：

• 在BlockSharedService中新增响应式流成员

  import { BehaviorSubject } from 'rxjs';
  public blockChange$ = new BehaviorSubject<Block | null>(null);
  

• 修改initBlock方法，每次生成新实例后推送通知

  initBlock(props: ReonMapProps) {
    this._block = new Block(props);
    this.blockChange$.next(this._block);
  }
  

其他组件只要订阅blockChange$，就能在实例更新时拿到最新值。

进阶写法：直接注入Block实例 #

如果项目规模比较大，不想每次都通过中间的共享服务拿Block，也可以把Block本身做成可直接注入的全局单例。只需要在根注入器里配置一个代理类型的Provider，所有对Block的访问都会自动转发到已经初始化好的真实实例上：

// 在应用启动的providers配置里（standalone项目就放在bootstrapApplication的providers数组，NgModule项目就放在根模块的providers）
{
  provide: Block,
  useFactory: () => {
    // 因为工厂执行的时候props还没传进来，这里不能直接new真实Block
    // 生成一个代理对象，所有属性/方法访问都转发到共享服务里存的真实Block上
    const blockSharedService = inject(BlockSharedService);
    return new Proxy({}, {
      get: (target, prop) => Reflect.get(blockSharedService.block, prop)
    })
  }
}

配置完之后，你在任何地方都可以直接构造函数注入Block类型，拿到的就是全局共享的实例，不需要再引入中间的Service。不过这个写法适合中大型项目，小项目用最开始的单例服务方案就够了，别整太复杂增加维护成本。

实际开发踩坑提醒 #

• 千万别在子模块、子组件的providers数组里重复注册这个共享服务，不然Angular会给你创建新的服务实例，到时候调半天发现拿到的Block根本不是你以为的那个单例
• 这个写法天生适配嵌入场景：就算同一个页面上插了好几个<block-element>，每个元素都是独立的Angular应用上下文，各自的Block实例不会串数据；元素被从DOM删掉的时候，对应的服务和Block实例也会跟着被回收，不会留内存垃圾
• 别图省事把Block实例直接塞到window上做全局变量，同页面多个嵌入元素的时候百分百会全局变量冲突，查问题都找不到地方

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