Angular指令仅在*ngIf嵌套元素上绑定生效，编译报错求助

问题情况 #

在AdminModule里同时声明了EntityEditPanelDirective和WorkItemFormComponent，但按钮上用[entityEditPanel]绑定时编译报错：

Can't bind to 'entityEditPanel' since it isn't a known property of 'button'

给按钮容器加*ngIf="true"就完全正常，调整指令和组件的声明顺序没用，其他指令没这个问题。

相关代码 #

指令代码 #

@Directive({
    selector: '[entityEditPanel]',
})
export class EntityEditPanelDirective {
    // ... 指令逻辑
}

组件代码 #

@Component({
    selector: 'work-item-form',
    templateUrl: './workItemForm.component.html'
})
export class WorkItemFormComponent extends EntityFormComponent<IWorkItemModel> {
    // ... 组件逻辑
}

模块配置 #

@NgModule({
    declarations: [
        EntityEditPanelDirective,
        WorkItemFormComponent
        // ... 其他声明项
    ],
    exports: [
        EntityEditPanelDirective,
        WorkItemFormComponent
        // ... 其他导出项
    ]
})
export class AdminModule {
}

编译失败的模板 #

<span class="btn-group">
    <button type="button" class="d-none d-sm-inline-block btn btn-sm btn-outline-secondary"
            [entityEditPanel]
            [entity]="entity">
        <i class="fa fa-sitemap"></i>
    </button>
</span>

编译成功的模板 #

<span class="btn-group" *ngIf="true">
    <button type="button" class="d-none d-sm-inline-block btn btn-sm btn-outline-secondary"
            [entityEditPanel]
            [entity]="entity">
        <i class="fa fa-sitemap"></i>
    </button>
</span>

问题根源 #

这是Angular模板编译的阶段差异导致的：

1. 没有*ngIf这类结构型指令时，Angular会在模块初始化的早期阶段解析模板，此时如果WorkItemFormComponent的父类EntityFormComponent存在跨模块依赖或延迟解析的情况，会导致当前模块声明的EntityEditPanelDirective没被正确关联到组件模板，Angular把[entityEditPanel]当成了button的原生属性。
2. 加*ngIf后，这个容器元素会被处理成动态模板片段，编译时机被推迟到组件实例化阶段，此时模块里的所有指令、组件都已经完成注册，Angular能正确识别这是一个指令绑定。

解决办法 #

1. 改用指令的属性写法（最直接） #

你的指令选择器是[entityEditPanel]，本身就是匹配带该属性的元素，不需要用方括号绑定（方括号是用来绑定输入属性的）。把模板改成这样：

<span class="btn-group">
    <button type="button" class="d-none d-sm-inline-block btn btn-sm btn-outline-secondary"
            entityEditPanel
            [entity]="entity">
        <i class="fa fa-sitemap"></i>
    </button>
</span>

这样Angular会直接识别这是应用指令，而非属性绑定。

2. 给指令显式定义输入属性（如果需要绑定值） #

如果你的指令需要通过[entityEditPanel]接收输入值，必须在指令里显式声明@Input()：

@Directive({
    selector: '[entityEditPanel]',
})
export class EntityEditPanelDirective {
    @Input() entityEditPanel: any; // 显式声明输入属性
    @Input() entity: IWorkItemModel; // 确保entity输入也正确定义

    // ... 其他指令逻辑
}

这样Angular会明确知道这是指令的输入绑定，不会误认为是元素属性。

3. 检查父类组件的模块依赖 #

确认EntityFormComponent所在的模块是否正确导入了AdminModule，或者有没有模块循环引用的情况。如果父类在另一个模块，要么让那个模块导入AdminModule，要么把EntityEditPanelDirective移到共享模块，让两个模块都导入共享模块。

4. 用ng-container模拟动态编译 #

如果以上方法都不行，可以用<ng-container>包裹按钮，模拟*ngIf的动态编译效果：

<ng-container>
    <button type="button" class="d-none d-sm-inline-block btn btn-sm btn-outline-secondary"
            [entityEditPanel]
            [entity]="entity">
        <i class="fa fa-sitemap"></i>
    </button>
</ng-container>

验证 #

修改后移除容器上的*ngIf="true"，重新编译项目，确认报错消失，指令功能正常。

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