Angular 15自定义条件渲染指令：设置ngIf不生效的原因与解决

核心问题 #

1. 自定义指令未被导入到使用组件
   你的App组件是独立组件（standalone: true），但未在imports数组中引入MyIfDirective，Angular无法识别该指令，导致逻辑完全不执行。

2. NgIf状态赋值无法触发变更检测
   直接在ngOnInit中给ngIfDirective.ngIf赋值时，NgIf的初始化流程已完成，且这种赋值方式无法触发Angular变更检测，视图不会同步更新。同时自定义指令未暴露输入属性，无法接收外部条件参数，不符合结构指令的使用逻辑。

修复步骤 #

步骤1：在App组件中导入自定义指令 #

修改App组件元数据，添加imports数组引入MyIfDirective：

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MyIfDirective], // 新增导入
  template: `
    <h1 *appMyIf>Hello from {{ name }}!</h1>
    <a target="_blank" href="https://angular.dev/overview">
      Learn more about Angular
    </a>
  `,
})
export class App {
  name = 'Angular';
}

步骤2：修改自定义指令，同步NgIf状态 #

给MyIfDirective添加输入属性，通过setter实时同步条件到NgIf，确保变更检测触发视图更新：

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

@Directive({
  selector: '[appMyIf]',
  hostDirectives: [NgIf],
  standalone: true,
})
export class MyIfDirective {
  private readonly ngIfDirective = inject(NgIf);

  // 绑定输入属性，同步条件到NgIf
  @Input('appMyIf') set appMyIf(condition: boolean) {
    this.ngIfDirective.ngIf = condition;
  }

  // 可选：设置默认显示状态
  constructor() {
    this.ngIfDirective.ngIf = true;
  }
}

可选优化：使用hostDirectives输入映射 #

通过hostDirectives的inputs配置直接映射输入属性，无需手动注入NgIf：

@Directive({
  selector: '[appMyIf]',
  hostDirectives: [
    {
      directive: NgIf,
      inputs: ['ngIf: appMyIf'] // 将appMyIf输入映射到NgIf的ngIf
    }
  ],
  standalone: true,
})
export class MyIfDirective {}

使用时可直接传递条件：<h1 *appMyIf="true">Hello from {{ name }}!</h1>

验证效果 #

修改完成后，Angular会正确识别自定义指令，根据传递的条件（或默认值）控制元素显示/隐藏，视图将正常更新。

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