Angular 15+将结构指令用作hostDirective时遇No provider for TemplateRef错误

自Angular 15版本起，我们可以将独立指令绑定到组件或指令的装饰器中，但尝试把依赖TemplateRef注入的结构指令用作hostDirective时，始终会触发No provider for TemplateRef错误，这类用法是否可行？

问题根源 #

结构指令依赖的TemplateRef是Angular在模板解析阶段，针对带*语法的结构指令声明自动提供的。而hostDirective是在组件/指令的类层面注入指令，并非在模板中声明，此时缺少模板上下文提供的TemplateRef实例，因此会抛出依赖缺失的错误。

可行解决方案 #

• 抽离核心逻辑为共享服务：将结构指令中的业务逻辑拆分到独立的服务或工具类中，让原结构指令和需要复用逻辑的组件/指令都依赖这个共享服务，避免直接将结构指令作为hostDirective。
• 拆分指令为属性+结构双版本：把原结构指令拆分为两部分：
  • 一个无TemplateRef依赖的属性指令，承载核心业务逻辑；
  • 保留原结构指令，仅负责获取TemplateRef并调用属性指令的逻辑。
    拆分后的属性指令可以正常作为hostDirective使用，结构指令则保留原模板场景的用法。

代码示例 #

// 共享逻辑服务
@Injectable({ providedIn: 'root' })
export class StructuralLogicService {
  processContext(context: any): void {
    // 原结构指令的核心业务逻辑
  }
}

// 拆分后的结构指令（仅负责模板相关操作）
@Directive({ selector: '[myStructural]' })
export class MyStructuralDirective {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef,
    private logicService: StructuralLogicService
  ) {}

  @Input() set myStructural(context: any) {
    this.logicService.processContext(context);
    // 结合TemplateRef和ViewContainerRef实现模板渲染逻辑
    this.viewContainer.clear();
    if (context.isShow) {
      this.viewContainer.createEmbeddedView(this.templateRef, context);
    }
  }
}

// 可作为hostDirective的属性指令
@Directive({ selector: '[myStructuralAttr]' })
export class MyStructuralAttrDirective {
  constructor(private logicService: StructuralLogicService) {}

  @Input() set myStructuralAttr(context: any) {
    this.logicService.processContext(context);
    // 这里可处理非模板相关的逻辑
  }
}

// 使用属性指令作为hostDirective的组件
@Component({
  selector: 'app-target-component',
  template: `<div>目标组件内容</div>`,
  hostDirectives: [MyStructuralAttrDirective]
})
export class TargetComponent {}

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