Angular5中多组件嵌套使用时事件响应缓慢问题求助

Hey，我碰到过类似的Angular5组件事件延迟问题，给你几个排查和解决的方向：

• 优化变更检测策略
  Angular默认的ChangeDetectionStrategy.Default会在每个事件触发时遍历整个组件树做变更检查，当Dashboard里嵌套多个子组件时，这会带来不小的性能开销。你可以给Dashboard组件和相关子组件设置OnPush策略，只在输入属性变化或组件内部事件触发时才做变更检测：

  import { Component, ChangeDetectionStrategy } from '@angular/core';
  
  @Component({
    selector: 'app-dashboard',
    templateUrl: './dashboard.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush
  })
  export class DashboardComponent {
    // ...你的组件逻辑
  }
  

  如果某些场景下需要手动触发变更检测，可以注入ChangeDetectorRef调用markForCheck()或detectChanges()。

• 避免在事件回调里做同步重操作
  检查saveLiveFeedPost方法里有没有同步执行的重型任务（比如大量数据计算、同步API调用），这些操作会阻塞JavaScript事件循环，导致事件响应延迟。把这类操作放到异步队列里，比如用setTimeout或者RxJS的异步调度器：

  saveLiveFeedPost(event: any) {
    // 把重操作放到异步队列，不阻塞当前事件循环
    setTimeout(() => {
      // 你的保存逻辑、数据处理等
      this.LiveFeeds.push(event);
      // 如果用了OnPush，记得触发变更检测
      this.cdr.markForCheck();
    }, 0);
  }
  

• 优化长列表渲染
  如果<srv-post-feed>渲染了大量Feed条目，频繁的DOM重绘重排会拖慢整个页面的响应速度。可以用Angular CDK的虚拟滚动组件CdkVirtualScrollViewport，只渲染当前可见区域的列表项，大幅减少DOM元素数量：

  <cdk-virtual-scroll-viewport itemSize="50" class="feed-container">
    <srv-post-feed-item *cdkVirtualFor="let feed of LiveFeeds" [feed]="feed"></srv-post-feed-item>
  </cdk-virtual-scroll-viewport>
  

  （注：需要先导入ScrollingModule到你的模块里）

• 检查NgZone相关问题
  如果子组件的事件触发逻辑跑出了Angular的NgZone（比如某些第三方库的回调），会导致Angular无法及时触发变更检测，看起来像是事件延迟。这时候可以用NgZone.run()把回调逻辑包起来，强制回到Angular的变更检测上下文：

  import { NgZone } from '@angular/core';
  
  constructor(private ngZone: NgZone) {}
  
  saveLiveFeedPost(event: any) {
    this.ngZone.run(() => {
      // 你的处理逻辑
    });
  }
  

• 排查不必要的事件监听
  检查子组件或Dashboard组件有没有绑定过多的全局事件监听（比如window.scroll、mousemove），这些监听会频繁触发，占用主线程资源。移除不需要的监听，或者给高频事件添加节流/防抖处理。

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