Angular 4：ngAfterViewChecked耗时或touchstart触发时点击事件未执行咨询

这是个很常见的Angular变更检测与浏览器事件循环冲突的问题，结合你的场景，我来拆解原因和对应的解决思路：

核心原因分析 #

1. ngAfterViewChecked耗时阻塞事件循环 #

Angular的变更检测钩子（比如ngAfterViewChecked）是在浏览器事件循环的宏任务队列中执行的。如果这个钩子内的操作耗时过长（比如复杂计算、大量DOM操作），会直接占用主线程，导致后续的用户交互事件（比如click）的回调任务被长时间阻塞，甚至因为浏览器的任务超时机制，被跳过执行。

即使你现在的ngAfterViewChecked只是打印日志，但如果实际项目中这个钩子包含了重计算、DOM遍历等操作，就会触发这个问题——变更检测会频繁执行（每次视图更新都会触发），持续占用主线程，让click事件的回调根本没机会运行。

2. touchstart事件干扰click触发 #

移动端浏览器中，click事件是在touchstart、touchmove、touchend之后触发的，而且自带300ms延迟。如果全局的touchstart处理程序存在以下情况，会直接阻止click事件的触发：

• 调用了event.preventDefault()：这会告诉浏览器取消后续的默认行为，包括click事件。
• touchstart处理程序耗时过长：同样会阻塞事件循环，导致后续的click事件回调无法进入执行队列。

针对性解决方案 #

优化ngAfterViewChecked的性能 #

方案1：避免不必要的耗时操作，减少钩子执行频率

ngAfterViewChecked会在每次变更检测后执行，所以一定要避免在里面做重复、耗时的操作。如果必须执行某些逻辑，要加条件判断，只在特定状态变化时运行，同时结合ChangeDetectorRef控制变更检测：

import { Component, AfterViewChecked, ChangeDetectorRef } from '@angular/core';

@Component({
  // ...组件元数据
})
export class MyClass implements AfterViewChecked{
  private lastEventRoleLength: number;

  constructor(private cdr: ChangeDetectorRef) {}

  ngAfterViewChecked() { 
    // 只在event_role数组长度变化时执行逻辑
    if (this.event_role.length !== this.lastEventRoleLength) {
      this.lastEventRoleLength = this.event_role.length;
      // 你的业务逻辑放到这里
      console.log("ngAfterViewChecked - 仅在数据变化时执行");
    }
    // 手动触发变更检测后，暂时分离，避免重复执行
    this.cdr.detach();
  }

  // 需要更新视图时，重新附加变更检测
  updateView() {
    this.cdr.reattach();
    this.cdr.detectChanges();
  }

  onCollapse(index: number) { 
    console.log("onCollapse"); 
  }
}

方案2：异步化耗时操作

如果某些逻辑必须在ngAfterViewChecked中执行，把它放到异步任务队列里，不阻塞当前的变更检测和事件处理：

ngAfterViewChecked() { 
  // 用Promise.resolve()将任务推到微任务队列，不阻塞主线程
  Promise.resolve().then(() => {
    // 耗时操作放到这里
    console.log("ngAfterViewChecked - 异步执行");
  });
}

修复touchstart对click的干扰 #

1. 检查全局touchstart事件处理程序：找到所有绑定在document或父元素上的touchstart监听，查看是否调用了event.preventDefault()。如果不是必须阻止默认行为（比如阻止滚动），请移除该调用。
2. 异步化touchstart中的耗时操作：如果touchstart里有复杂逻辑，同样用setTimeout或Promise.resolve()异步执行，避免阻塞后续的click事件：

document.addEventListener('touchstart', (e) => {
  // 异步执行耗时逻辑
  setTimeout(() => {
    // 你的touchstart处理代码
  }, 0);
});

额外排查点 #

如果以上方案无效，可以检查模板中的事件绑定是否存在问题：

• 确保*ngFor的数据源event_role是稳定的（避免频繁变更导致视图频繁重建），可以用trackBy优化：

<div class="collapse_section" *ngFor="let event of event_role; let i = index; trackBy: trackByIndex" #jobBody>
  <header accordion-heading (click)="onCollapse(i)" [attr.aria-expanded]="!isCollapsed">
    ...
  </header>
</div>

trackByIndex(index: number) {
  return index;
}

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