Angular多组件场景下SomeService的ViewContainerRef实例唯一性问题及解决

一、当前场景的结果：所有组件共用同一个viewContainerRef #

你用@Injectable({providedIn: 'root'})装饰的SomeService是全局单例服务——整个应用里只会存在这一个服务实例。

当多个继承AppComponentBase的组件实例化时，每个组件的构造函数都会调用someService.setViewContainer传入自己的ViewContainerRef，但由于服务是单例，后续组件的调用会覆盖之前的设置。最终所有组件对应的someService.viewContainerRef都是最后一个实例化组件的引用，属于共用状态。

二、实现每个组件拥有独立ViewContainerRef的方案 #

方案1：将SomeService改为组件级提供 #

放弃全局单例，让每个组件实例拥有专属的SomeService实例。只需在每个继承AppComponentBase的子类组件的@Component装饰器中，把SomeService加入providers数组：

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  providers: [SomeService] // 每个组件实例都会创建新的SomeService实例
})
export class ChildComponent extends AppComponentBase {
  // 组件业务逻辑
}

这样每个组件实例化时，Angular会为其创建专属的SomeService，调用setViewContainer后，服务内的viewContainerRef自然就是当前组件的独立引用。

方案2：调用服务方法时传入ViewContainerRef #

不需要在服务中存储ViewContainerRef，而是将其作为参数传递给服务的业务方法。比如修改服务的逻辑：

@Injectable({providedIn: 'root'})
export class SomeService {
  // 移除viewContainerRef字段和setViewContainer方法
  doBusinessLogic(vcRef: ViewContainerRef) {
    // 使用传入的vcRef执行业务操作
  }
}

然后在组件内调用服务方法时传入自身的ViewContainerRef：

export abstract class AppComponentBase {
  constructor(
    protected someService: SomeService,
    protected viewContainerRef: ViewContainerRef
  ) {}

  useServiceLogic() {
    this.someService.doBusinessLogic(this.viewContainerRef);
  }
}

这种方式既保留了服务的全局单例特性，又能让每个组件使用自己的ViewContainerRef执行逻辑。

方案3：手动创建服务实例（进阶） #

如果需要更灵活的实例控制，可以在基类中通过组件的Injector手动创建SomeService实例：

export abstract class AppComponentBase {
  protected someService: SomeService;

  constructor(
    private injector: Injector,
    protected viewContainerRef: ViewContainerRef
  ) {
    // 创建当前组件专属的SomeService实例
    this.someService = Injector.create({
      providers: [{provide: SomeService}],
      parent: injector
    }).get(SomeService);
    this.someService.setViewContainer(this.viewContainerRef);
  }
}

不过这种方式相对复杂，一般优先推荐方案1或方案2。

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