Angular中同一元素结合*ngFor与自定义指令的实现问题

问题场景 #

原本使用*ngFor渲染Angular Material卡片列表的代码运行正常：

<mat-card *ngFor="let todo of todos">
    <mat-card-header>
        <mat-card-title>{{todo.title}}</mat-card-title>
    </mat-card-header>
</mat-card>

需要添加一个自定义结构型指令customFeature，根据Todo对象的id属性判断是否显示卡片，该指令代码如下：

@Directive({
    selector: '[customFeature]'
})
export class CustomFeatureDirective implements OnInit {
    @Input()
    customFeature: string;

    constructor(
        private tpl: TemplateRef<any>,
        private vcr: ViewContainerRef,
        private myService: MyService
    ) {}

    ngOnInit(): void{
        const enabled = this.myService.amIEnabled(this.customFeature)
        if(enabled)
            this.vcr.createEmbeddedView(this.tpl);
    }
}

尝试将两个指令放在同一元素时报错：同一元素不能有多个模板绑定：

<mat-card *ngFor="let todo of todos" *customFeature="todo.id">
    <mat-card-header>
        <mat-card-title>{{todo.title}}</mat-card-title>
    </mat-card-header>
</mat-card>

解决方案 #

核心原因 #

Angular中带*的结构型指令是语法糖，会被编译成<ng-template>包裹的结构，同一元素无法同时解析多个这类语法糖，因此必须拆分。

方案一：使用<ng-container>拆分指令（推荐） #

<ng-container>是Angular提供的逻辑容器，不会渲染成真实DOM元素，适合用来承载*ngFor，将自定义指令放在实际的mat-card元素上：

<ng-container *ngFor="let todo of todos">
    <mat-card *customFeature="todo.id">
        <mat-card-header>
            <mat-card-title>{{todo.title}}</mat-card-title>
        </mat-card-header>
    </mat-card>
</ng-container>

这种方式保持了结构型指令的特性（不渲染不符合条件的卡片），同时避免了模板绑定冲突。

方案二：将自定义指令改为属性型指令 #

如果不需要完全移除DOM元素，只是隐藏，可以将指令改为属性型，直接控制元素的显示状态：
修改指令代码：

@Directive({
    selector: '[customFeature]'
})
export class CustomFeatureDirective implements OnInit {
    @Input() customFeature: string;

    constructor(private el: ElementRef, private myService: MyService) {}

    ngOnInit(): void {
        const enabled = this.myService.amIEnabled(this.customFeature);
        this.el.nativeElement.style.display = enabled ? 'block' : 'none';
    }
}

使用时可直接与*ngFor共存于同一元素：

<mat-card *ngFor="let todo of todos" [customFeature]="todo.id">
    <mat-card-header>
        <mat-card-title>{{todo.title}}</mat-card-title>
    </mat-card-header>
</mat-card>

注意：此方式下不符合条件的卡片仍会被渲染到DOM中，只是通过CSS隐藏，需根据业务需求选择。

关于旧版Angular的记忆 #

早期AngularJS允许类似多指令叠加的写法，但Angular 2+重构了模板编译机制，结构型指令的*语法糖规则导致同一元素无法同时使用多个结构型指令。

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