Angular中*ngIf模板渲染后执行函数，Pipe与Directive哪个性能更优？

性能对比结论 #

第一种使用自定义Directive的方案性能远优于Pipe方案，原因如下：

• 自定义Directive的ngOnInit生命周期钩子仅会在绑定的DOM元素完成初始化渲染时触发1次，只有元素被销毁后重新渲染才会再次执行，没有额外的运行时开销。
• Pipe的设计定位是做数据转换，而非触发副作用，即使你自定义了仅执行一次的ngInit纯Pipe，依然会在每轮变更检测时触发输入值的比对校验，如果不小心定义成了非纯Pipe，每轮变更检测都会重复执行回调，性能损耗会非常大。同时这种写法不符合Angular的设计规范，后续维护成本很高。

更合适的替代方案 #

方案1：使用Angular官方提供的渲染后钩子（Angular 16+ 推荐） #

直接在组件内监听condition的变化，当condition变为true时，调用官方的afterNextRender钩子，即可保证回调执行时button已经完成DOM渲染：

// 组件逻辑
condition = false;

toggleCondition() {
  this.condition = true;
  afterNextRender(() => {
    this.callback();
  });
}

不需要额外自定义指令或Pipe，性能最优，符合官方设计规范。

方案2：setTimeout 兼容方案（兼容所有Angular版本） #

不需要引入任何额外能力，利用JS事件循环的执行机制，当condition变为true时用延时为0的setTimeout包裹回调，回调执行时DOM已经渲染完成：

toggleCondition() {
  this.condition = true;
  setTimeout(() => this.callback(), 0);
}

写法简单，性能也足够好，适合低版本Angular项目使用。

方案3：@ViewChild 监听方案 #

给button加模板引用，通过监听ViewChild的实例变化判断元素是否渲染完成：

<div *ngIf="condition">
   <button #saveBtn>Save</button>
<div>

@ViewChild('saveBtn') saveBtn!: ElementRef;
private hasTriggered = false;

ngAfterViewChecked() {
  if (this.saveBtn && !this.hasTriggered) {
    this.callback();
    this.hasTriggered = true;
  }
  // 当condition变为false时重置标记位
  if (!this.condition) {
    this.hasTriggered = false;
  }
}

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