Angular 15使用hostDirectives引入NgIf时，为何抛出TemplateRef无提供者错误？

你遇到的TemplateRef错误，核心原因是**NgIf是结构型指令，它依赖TemplateRef和ViewContainerRef来操作模板内容，但你把它作为宿主指令加到了属性型指令上**——属性型指令作用于普通DOM元素，Angular无法自动为NgIf提供它需要的TemplateRef实例。

1. 将你的指令改为结构型指令 #

结构型指令天生会接收TemplateRef和ViewContainerRef，这正是NgIf需要的依赖。修改指令代码，注入这两个对象：

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
import { NgIf } from '@angular/common';

@Directive({
  selector: '[appPermission]',
  standalone: true,
  hostDirectives: [
    {
      directive: NgIf,
      // 将内部权限状态绑定到NgIf的ngIf输入
      inputs: ['ngIf: _hasPermission'],
    },
  ],
})
export class PermissionDirective {
  private _hasPermission = false;

  // 注入结构型指令必需的依赖，供NgIf使用
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainerRef: ViewContainerRef
  ) {}

  @Input() set appPermission(requiredRole: string) {
    // 替换为你的实际权限判断逻辑
    const currentUserRole = 'admin';
    this._hasPermission = currentUserRole === requiredRole;
  }
}

2. 修改指令的使用方式 #

因为现在是结构型指令，需要用Angular的结构型语法（加上*）来使用：

<!-- 注意前面的*号，以及参数的绑定方式 -->
<div *appPermission="'admin'">仅管理员可见内容</div>

关键说明 #

当你使用*appPermission语法时，Angular会自动把目标元素包裹成<ng-template>，这样TemplateRef就会被正确注入，NgIf就能正常获取依赖，完成内容的显示/隐藏逻辑。

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