如何用指令阻止组件构造？探究ngIf的内部实现机制

核心差异：DOM样式隐藏 vs 视图树控制 #

你的自定义指令只是通过display: none隐藏DOM元素，但Angular在解析模板时，已经把<app-comp1>作为视图树的一部分完成了初始化——组件的constructor会在模板解析阶段被调用，之后才轮到你的指令执行隐藏逻辑，所以没法阻止构造函数运行。

而*ngIf是结构型指令，它的核心是直接控制内容是否被纳入Angular的视图容器：

• 当表达式为false时，Angular不会把*ngIf包裹的内容（包括子组件）添加到视图树里，自然不会触发组件的初始化流程（constructor、ngOnInit等钩子都不会执行）。
• 只有表达式为true时，Angular才会动态创建组件实例，把它挂载到视图中，这时才会执行构造函数。

*ngIf的内部实现逻辑 #

Angular的结构型指令依赖两个关键API：

• TemplateRef：把*ngIf包裹的内容编译成一个“模板”，而不是直接渲染成DOM。
• ViewContainerRef：作为视图的容器，负责管理模板的创建和销毁。

*ngIf的核心流程大概是：

• 监听绑定表达式的变化
• 表达式为true时，调用viewContainer.createEmbeddedView(templateRef)，把模板实例化并加入视图容器，此时内部组件才会被初始化。
• 表达式为false时，调用viewContainer.clear()，销毁视图容器里的所有内容，同时销毁对应的组件实例（触发ngOnDestroy）。

改造自定义指令实现相同效果 #

如果要让你的featureFlagCheck也能阻止组件构造，需要改成结构型指令：

1. 指令代码实现：

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

@Directive({
  selector: '[featureFlagCheck]'
})
export class FeatureFlagCheckDirective implements OnInit {
  @Input() featureFlagCheckFlagName: string;
  @Input() featureFlagCheckFlagValue: string;

  constructor(
    private viewContainer: ViewContainerRef,
    private templateRef: TemplateRef<any>
  ) {}

  ngOnInit(): void {
    // 替换成你的实际开关校验逻辑
    const currentFlag = 'v2';
    if (currentFlag === this.featureFlagCheckFlagValue) {
      // 开关匹配，渲染模板内容
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      // 不匹配，清空视图容器，不渲染内容
      this.viewContainer.clear();
    }
  }
}

2. 模板用法调整：

<ng-container *featureFlagCheck="flagName: 'componentVersion', flagValue: 'v1'">
  <app-comp1>...</app-comp1>
</ng-container>

这样只有开关匹配时，<app-comp1>才会被初始化，和*ngIf的效果一致。

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