Angular ng-template组件服务注入疑问：如何在使用处指定服务实例？

这个问题确实是Angular模板注入上下文的典型坑——默认情况下，ng-template里的组件依赖是按照模板定义时所在的组件注入器来解析的，而不是你使用模板的地方。除了通过模板上下文传递输入的方式，还有这几种更直接的方案：

1. 使用NgTemplateOutlet的injector输入（Angular 14+ 推荐） #

从Angular 14开始，NgTemplateOutlet新增了injector输入属性，允许你在使用模板时传入自定义注入器，模板内的组件会优先使用这个注入器解析依赖。

实现步骤： #

• 在使用模板的组件（比如Component2）中，创建包含自定义服务实例的注入器：

import { Component, Injector, ViewChild } from '@angular/core';
import { MyService } from './my.service';
import { TemplateComponent } from './template.component';

@Component({
  selector: 'app-component2',
  template: `
    <ng-container *ngTemplateOutlet="template; injector: customInjector"></ng-container>
  `,
})
export class Component2Component {
  @ViewChild(TemplateComponent) template!: TemplateComponent;

  customInjector: Injector;

  constructor(private injector: Injector) {
    // 创建自定义注入器，替换MyService的实例
    this.customInjector = Injector.create({
      providers: [
        { provide: MyService, useValue: new MyService('Component2 专属实例') }
      ],
      parent: this.injector // 继承父注入器的其他依赖
    });
  }
}

• 这样模板内的组件就会使用你传入的customInjector里的服务实例，完全忽略模板定义处的providers配置。

2. 用ngComponentOutlet直接渲染组件并指定注入器 #

如果不需要复用模板结构，而是直接渲染目标组件，可以用ngComponentOutlet替代ng-template，它天生支持指定注入器。

示例代码： #

@Component({
  selector: 'app-component2',
  template: `
    <ng-container *ngComponentOutlet="TargetComponent; injector: customInjector"></ng-container>
  `,
})
export class Component2Component {
  customInjector: Injector;

  constructor(private injector: Injector) {
    this.customInjector = Injector.create({
      providers: [{ provide: MyService, useClass: MyComponent2Service }], // 或者用useValue/useFactory
      parent: this.injector
    });
  }
}

这种方式更灵活，适合不需要模板复用的场景。

3. 手动通过ViewContainerRef.createComponent创建组件 #

如果你需要更精细的组件生命周期控制，可以通过ViewContainerRef手动创建组件，并传入自定义注入器。

实现步骤： #

• 在使用模板的组件模板中添加一个容器：

<ng-template #vc></ng-template>

• 在组件类中获取容器并创建组件：

import { Component, ViewChild, ViewContainerRef, Injector } from '@angular/core';
import { TargetComponent } from './target.component';
import { MyService } from './my.service';

@Component({
  selector: 'app-component2',
  template: `<ng-template #vc></ng-template>`,
})
export class Component2Component {
  @ViewChild('vc', { read: ViewContainerRef }) vc!: ViewContainerRef;

  constructor(private injector: Injector) {}

  ngOnInit() {
    const customInjector = Injector.create({
      providers: [{ provide: MyService, useValue: new MyService('手动创建的实例') }],
      parent: this.injector
    });

    // 创建组件并传入自定义注入器
    this.vc.createComponent(TargetComponent, { injector: customInjector });
  }
}

这些方案都能绕过模板定义时的注入上下文，让你在使用模板/组件的位置控制服务实例的注入。其中第一种（NgTemplateOutlet的injector参数）是Angular14+最简洁的方案，推荐优先使用。

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