Angular：如何让ng-content投影内容获取内部模板的Token而非外部DOM的

核心问题拆解 #

你遇到的本质是Angular的投影内容注入上下文规则：ng-content投影的内容，其依赖注入的上下文是内容被声明的组件（即使用<draw-badge>的父组件），而非投影目标所在的<draw-circle>组件。所以<draw-outline>会在外部上下文查找Shape令牌，自然找不到<draw-circle>提供的实例。

可行方案一：用模板引用+ngTemplateOutlet切换注入上下文 #

这是最轻量化的方案，核心是把投影内容包装成模板，在<draw-circle>的上下文里渲染，从而让注入器指向<draw-circle>：

步骤1：修改<draw-badge>的使用方式 #

让用户把投影内容放到<ng-template>里，通过内容投影传递给<draw-badge>：

<draw-badge icon="Support" color="red">
  <ng-template>
    <draw-outline color="black" [width]="2" />
  </ng-template>
</draw-badge>

步骤2：修改BadgeComponent的模板和逻辑 #

把原来的<ng-content>换成ngTemplateOutlet，并传入<draw-circle>的注入器，确保模板内容在<draw-circle>的上下文里渲染：

import { Component, ContentChild, TemplateRef, ViewChild, Injector } from '@angular/core';
import { DrawCircleComponent } from './draw-circle.component';

@Component({
  selector: 'draw-badge',
  template: `
    <draw-circle
      #circle
      [position.x]="position.x"
      [position.y]="position.y"
      [resolution]="20"
      [radius]="2"
      [color]="color"
    >
      <ng-container *ngTemplateOutlet="contentTemplate; injector: circleInjector"></ng-container>
    </draw-circle>
  `
})
export class BadgeComponent {
  @ContentChild(TemplateRef) contentTemplate!: TemplateRef<any>;
  @ViewChild('circle', { read: Injector }) circleInjector!: Injector;
  
  // 保留原有属性：position、color、icon等
}

方案优势 #

ngTemplateOutlet的injector参数可以指定模板渲染时使用的注入器，这里直接复用<draw-circle>的注入器，<draw-outline>就能找到<draw-circle>提供的Shape令牌，逻辑简单且性能开销极低。

可行方案二：优化令牌代理方案（降低开销） #

你之前尝试的代理方案开销大，是因为可能做了不必要的转发逻辑。可以简化成：在BadgeComponent中直接提供<draw-circle>的Shape实例，而非转发所有方法：

import { Component, ViewChild, Provider } from '@angular/core';
import { Shape, DrawCircleComponent } from './draw-circle.component';

@Component({
  selector: 'draw-badge',
  template: `
    <draw-circle #circle
      [position.x]="position.x"
      [position.y]="position.y"
      [resolution]="20"
      [radius]="2"
      [color]="color"
    >
      <ng-content />
    </draw-circle>
  `,
  // 直接提供Shape令牌，指向内部的draw-circle实例
  providers: [
    {
      provide: Shape,
      useFactory: (badge: BadgeComponent) => badge.circle,
      deps: [BadgeComponent]
    }
  ]
})
export class BadgeComponent {
  @ViewChild('circle') circle!: DrawCircleComponent;
  
  // 保留原有属性
}

优化说明 #

这个方案不需要复杂的转发逻辑，只是让BadgeComponent的注入器中Shape令牌指向内部的<draw-circle>实例，投影的<draw-outline>在查找Shape时，会直接拿到<draw-circle>本身，几乎没有额外开销。

方案三：可覆盖服务通信（可行且符合最佳实践） #

你提到的可覆盖服务方案是完全可行的，属于Angular依赖注入的标准用法，适合复杂组件库的解耦场景：

步骤1：定义基础Shape服务和可覆盖令牌 #

// shape.service.ts
import { Injectable, InjectionToken } from '@angular/core';
import { DrawCircleComponent } from './draw-circle.component';

@Injectable()
export class ShapeService {
  private shapeInstance?: DrawCircleComponent;

  setShape(shape: DrawCircleComponent) {
    this.shapeInstance = shape;
  }

  getShape() {
    return this.shapeInstance;
  }
}

// 定义可覆盖的令牌
export const SHAPE_SERVICE = new InjectionToken<ShapeService>('ShapeService');

步骤2：修改<draw-circle>组件，使用可覆盖令牌 #

@Component({
  selector: 'draw-circle',
  template: `...`,
  providers: [
    ShapeService,
    { provide: SHAPE_SERVICE, useExisting: ShapeService }
  ]
})
export class DrawCircleComponent {
  constructor(@Inject(SHAPE_SERVICE) private shapeService: ShapeService) {
    this.shapeService.setShape(this);
  }
}

步骤3：在BadgeComponent中提供共享的服务实例 #

@Component({
  selector: 'draw-badge',
  template: `...`,
  providers: [
    {
      provide: SHAPE_SERVICE,
      useClass: ShapeService
    }
  ]
})
export class BadgeComponent {
  @ViewChild(DrawCircleComponent) circle!: DrawCircleComponent;
  
  constructor(@Inject(SHAPE_SERVICE) private shapeService: ShapeService) {}
  
  ngAfterViewInit() {
    this.shapeService.setShape(this.circle);
  }
}

步骤4：修改<draw-outline>注入服务 #

@Component({
  selector: 'draw-outline',
  template: `...`
})
export class DrawOutlineComponent {
  constructor(@Inject(SHAPE_SERVICE) private shapeService: ShapeService) {
    const shape = this.shapeService.getShape();
    // 基于shape实例执行通信逻辑
  }
}

这个方案的优势是完全解耦了组件间的直接依赖，后续扩展形状类型或通信逻辑时更灵活，符合Angular的最佳实践。

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