Angular 14中@ContentChildren无法识别ng-content元素问题求助

问题分析 #

你的代码存在两个核心问题导致@ContentChildren无法找到InputHintDirective实例：

1. 指令选择器大小写不匹配：HTML属性名不区分大小写，模板中写的InputHint会被浏览器转换为小写inputhint，但你的指令选择器是[InputHint]，大小写不匹配导致指令未被应用到元素上。
2. QueryList初始值更新时机问题：模板中直接使用_hintChildren.length时，初始渲染阶段QueryList可能还未完成初始化，导致判断失效。

修复步骤 #

1. 修正指令选择器 #

将指令的选择器改为驼峰命名（或短横线分隔），确保能匹配模板中的属性：

// directive
@Directive({ selector: '[inputHint]' }) // 修改为小写开头的驼峰命名
export class InputHintDirective {}

在使用组件时，对应调整属性写法（两种方式都支持）：

<!-- 方式1：驼峰属性 -->
<input-group class="col-span-2">
    <span inputHint>First Name</span>
    <input type="text" placeholder="" />
</input-group>

<!-- 方式2：短横线分隔属性（Angular自动映射驼峰指令） -->
<input-group class="col-span-2">
    <span input-hint>First Name</span>
    <input type="text" placeholder="" />
</input-group>

2. 完善组件逻辑，监听QueryList变化 #

在InputGroupComponent中添加标志位，通过AfterContentInit初始化并监听QueryList的动态变化：

// component.ts
import { Component, ContentChildren, QueryList, AfterContentInit, OnDestroy } from '@angular/core';
import { Subject, takeUntil } from 'rxjs';
import { InputHintDirective } from './input-hint.directive';

@Component({
    selector: 'input-group',
    templateUrl: './input-group.component.html', // 修正模板路径（原路径./.component.html是错误的）
    styleUrls: ['./input-group.component.scss'],
})
export class InputGroupComponent implements AfterContentInit, OnDestroy {
    @ContentChildren(InputHintDirective)
    _hintChildren: QueryList<InputHintDirective>;

    hasHint = false;
    private _destroy$ = new Subject<void>();

    ngAfterContentInit(): void {
        this._updateHasHint();
        // 监听投影元素的动态增减
        this._hintChildren.changes
            .pipe(takeUntil(this._destroy$))
            .subscribe(() => this._updateHasHint());
    }

    ngOnDestroy(): void {
        this._destroy$.next();
        this._destroy$.complete();
    }

    private _updateHasHint(): void {
        this.hasHint = this._hintChildren.length > 0;
    }
}

3. 更新模板判断条件 #

将模板中的*ngIf="_hintChildren.length"替换为标志位hasHint，同时同步修改ng-content的选择器：

<div
    class="text-brandGray mb-1 flex items-center justify-start text-sm"
    *ngIf="hasHint"
>
    <div class="group ml-2 block cursor-pointer">
        <div class="relative flex items-center">
            <span
                class="flex h-4 w-4 items-center justify-center rounded-full bg-brandBlack text-white"
            >
                ?
            </span>
            <div
                class="max-w-96 absolute ml-5 hidden min-w-max rounded-md border border-brandBorder bg-white px-1 text-gray-700 group-hover:block"
            >
                <ng-content select="[inputHint]"></ng-content>
            </div>
        </div>
    </div>
</div>

额外检查 #

确保InputHintDirective和InputGroupComponent都已在你的Angular模块中声明：

@NgModule({
  declarations: [
    InputGroupComponent,
    InputHintDirective
  ],
  exports: [
    InputGroupComponent
  ]
})
export class YourModule {}

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