Angular自定义Directive传入Input值失败报错问题

问题复现代码 #

组件模板代码（原标注为home.component.ts，实际为模板片段） #

<div *myNgIf myNgIfSomething="true" class="col-sm-6">
    <div class="form-group">
        <label for="lname">LastName</label>
        <input class="form-control" type="text" name="lname">
    </div>
</div>

自定义指令代码 #

@Directive({
    selector: '[myNgIf]'
})
export class myNgIfDirective implements AfterViewInit {

    @Input() myNgIfSomething: boolean = false;

    constructor(private container: ViewContainerRef, private template: TemplateRef<any>) { }

    ngAfterViewInit(): void {
        if(this.myNgIfSomething){
            this.container.createEmbeddedView(this.template)
        }else{
            this.container.clear()
        }
    }

}

报错截图 #

报错根本原因 #

• 结构指令语法糖理解错误：*myNgIf是Angular提供的结构指令语法糖，编译时会被转换为<ng-template [myNgIf]>包裹当前宿主元素的结构。写在宿主div上的myNgIfSomething="true"会被识别为div元素的普通属性，不会绑定到外层myNgIf指令的实例上，Angular检测到div上存在未声明的属性绑定，就会抛出截图中「无法绑定到myNgIfSomething，因为它不是div的已知属性」的错误。
• 传值类型错误：myNgIfSomething="true"是静态属性绑定写法，传递的是字符串"true"，和指令中声明的boolean类型不匹配，就算参数能正常传入，判断逻辑也会出现非预期结果。
• 执行逻辑时机错误：将视图渲染逻辑写在ngAfterViewInit生命周期中，逻辑只会在视图初始化完成后执行一次，后续输入参数变更时不会触发视图更新，不符合结构指令的响应式要求。
• 命名不规范：指令类名采用小写开头，不符合Angular类命名规范，容易引发声明、依赖注入阶段的隐性问题。

修复方案 #

• 调整结构指令传参写法：所有传给结构指令的输入参数，都需要写在*myNgIf后的绑定语句中，和指令选择器用分号分隔，不要写在宿主元素的普通属性位置。
• 改用属性绑定传值：需要传递布尔值等非字符串类型时，用方括号包裹属性名，保证传入值的类型正确；如果是指令的核心控制参数，可以给@Input设置和指令选择器同名的别名，简化模板写法。
• 调整渲染逻辑执行时机：将视图更新逻辑放在ngOnChanges生命周期中，保证输入参数变化时能实时更新视图。
• 修正类名命名为大驼峰格式。

修复后代码 #

组件模板

<!-- 简洁写法，配合输入别名使用 -->
<div *myNgIf="true" class="col-sm-6">
    <div class="form-group">
        <label for="lname">LastName</label>
        <input class="form-control" type="text" name="lname">
    </div>
</div>

<!-- 多参数写法，多个输入用分号分隔 -->
<!-- <div *myNgIf; [myNgIfSomething]="true" class="col-sm-6"> -->

自定义指令

import { Directive, Input, ViewContainerRef, TemplateRef, OnChanges, SimpleChanges } from '@angular/core';

@Directive({
    selector: '[myNgIf]'
})
export class MyNgIfDirective implements OnChanges {
    // 给输入设置和指令同名的别名，支持*myNgIf="value"的简洁写法
    @Input('myNgIf') myNgIfSomething: boolean = false;

    constructor(private container: ViewContainerRef, private template: TemplateRef<any>) { }

    ngOnChanges(changes: SimpleChanges): void {
        this.updateView();
    }

    private updateView(): void {
        this.container.clear();
        if (this.myNgIfSomething) {
            this.container.createEmbeddedView(this.template);
        }
    }
}

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