Angular 15如何程序化监听组件生命周期，实现页面加载时间上报GA

针对你不想逐个修改100+页面组件的需求，以下两种无侵入式方案可实现全局页面加载时间上报：

方案一：利用APP_INITIALIZER全局增强所有路由组件 #

通过应用初始化钩子遍历所有路由配置（含懒加载模块），动态给组件的ngAfterViewInit方法注入上报逻辑，无需修改任何组件代码。

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';
import { filter, tap } from 'rxjs';

// 记录导航开始时间，用于计算加载时长
let navigationStartTime: number;

function setupPageLoadTracking(router: Router) {
  // 监听导航开始事件，记录起始时间
  router.events.pipe(
    filter(e => e instanceof NavigationStart),
    tap(() => navigationStartTime = performance.now())
  ).subscribe();

  return async () => {
    // 遍历路由配置，增强组件生命周期
    const traverseRoutes = async (routes: any[]) => {
      for (const route of routes) {
        if (route.component) {
          enhanceComponent(route.component);
        } else if (route.loadChildren) {
          // 处理懒加载模块
          const loadedModule = await route.loadChildren();
          if (loadedModule.routes) {
            await traverseRoutes(loadedModule.routes);
          }
        }
        if (route.children) {
          await traverseRoutes(route.children);
        }
      }
    };
    await traverseRoutes(router.config);
  };

  // 增强组件的ngAfterViewInit方法
  function enhanceComponent(component: any) {
    // 避免重复增强同一组件
    if (component.__hasLoadTracking) return;
    component.__hasLoadTracking = true;

    const originalNgAfterViewInit = component.prototype.ngAfterViewInit;
    component.prototype.ngAfterViewInit = function() {
      // 执行组件原有逻辑（如果存在）
      if (originalNgAfterViewInit) {
        originalNgAfterViewInit.call(this);
      }
      // 计算并上报加载时间
      const loadDuration = performance.now() - navigationStartTime;
      const pagePath = router.url;
      // 替换为你的GA上报代码
      console.log(`页面 ${pagePath} 加载完成，耗时：${loadDuration.toFixed(2)}ms`);
      // gtag('event', 'page_load', {
      //   page_path: pagePath,
      //   load_duration: loadDuration
      // });
    };
  }
}

@NgModule({
  // ... 你的模块其他配置
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: setupPageLoadTracking,
      deps: [Router],
      multi: true
    }
  ]
})
export class AppModule { }

方案二：通过ActivationEnd事件动态增强激活的组件 #

在路由激活完成时（ActivationEnd）拿到当前组件类，动态注入上报逻辑，适配懒加载场景，无需提前遍历路由。

import { Component, OnInit } from '@angular/core';
import { Router, ActivationEnd, NavigationStart } from '@angular/router';
import { filter, tap } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  private navigationStartTime: number;

  constructor(private router: Router) {}

  ngOnInit(): void {
    // 记录导航开始时间
    this.router.events.pipe(
      filter(e => e instanceof NavigationStart),
      tap(() => this.navigationStartTime = performance.now())
    ).subscribe();

    // 监听路由激活完成事件，增强组件
    this.router.events.pipe(
      filter(e => e instanceof ActivationEnd),
      tap((e: ActivationEnd) => {
        const component = e.snapshot.component;
        if (!component || component.__hasLoadTracking) return;
        
        component.__hasLoadTracking = true;
        const originalNgAfterViewInit = component.prototype.ngAfterViewInit;
        
        component.prototype.ngAfterViewInit = function() {
          if (originalNgAfterViewInit) {
            originalNgAfterViewInit.call(this);
          }
          // 计算并上报加载时间
          const loadDuration = performance.now() - this.navigationStartTime;
          // 替换为你的GA上报代码
          console.log(`页面 ${e.snapshot.routeConfig?.path} 加载完成，耗时：${loadDuration.toFixed(2)}ms`);
        };
      })
    ).subscribe();
  }
}

关键注意事项 #

• 两种方案都会保留组件原有ngAfterViewInit逻辑，不会破坏现有功能；
• 加入__hasLoadTracking标记，避免重复增强同一组件类；
• 使用performance.now()获取高精度时间戳，计算的加载时长更准确；
• 两种方案均支持懒加载组件，无需额外配置；
• AfterViewInit的时机对应页面内容渲染完成的实际加载状态，比NavigationEnd等事件更适合上报用户感知的加载时间。

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