如何使用原生JS监听Angular应用就绪事件 无需修改原有项目文件

完全可以通过原生JS实现你的需求，不需要修改原有Angular项目的代码，下面是两种不同场景的可行方案：

方案1：监听根组件挂载与DOM稳定（兼容性最好，全场景通用） #

Angular应用默认会挂载到<app-root>标签下（部分项目可能自定义了根选择器，替换成对应值即可），你可以结合MutationObserver监听根节点的内容变化，同时判断页面加载状态，逻辑通用无依赖，生产环境也可以正常使用：

function onAngularReady(callback) {
  // 替换为你的Angular应用实际的根节点选择器，默认是app-root
  const rootSelector = 'app-root';
  let hasRun = false;

  function checkReady() {
    const rootEl = document.querySelector(rootSelector);
    // 判断根节点已存在、有渲染内容、页面所有静态资源加载完成
    if (rootEl && rootEl.children.length > 0 && document.readyState === 'complete') {
      // 加300ms防抖，避免Angular首次渲染后的变更检测还在执行
      setTimeout(() => {
        if (!hasRun) {
          hasRun = true;
          callback();
        }
      }, 300);
      return true;
    }
    return false;
  }

  // 先执行一次检查，避免脚本加载时Angular已经初始化完成
  if (checkReady()) return;

  // 监听全局DOM变更
  const observer = new MutationObserver(checkReady);
  observer.observe(document.body, { childList: true, subtree: true });

  // 兜底逻辑：页面load事件后1秒强制触发，避免极端场景漏执行
  window.addEventListener('load', () => {
    setTimeout(() => {
      if (!hasRun) {
        hasRun = true;
        callback();
      }
    }, 1000);
  });
}

// 调用示例
onAngularReady(() => {
  console.log('Angular应用已完全加载完成，可以执行自定义逻辑');
  // 你的业务代码写在这里
});

方案2：利用Angular全局API检测（适用Angular 9+项目） #

Angular 9及以上版本默认会在全局暴露ng工具对象，通过这个对象可以直接判断应用是否完成初始化，逻辑更精准：

function onAngularReady(callback) {
  let hasRun = false;
  const rootSelector = 'app-root';

  function check() {
    if (hasRun) return;
    const rootEl = document.querySelector(rootSelector);
    // 全局ng对象存在，且可以拿到根组件实例，说明应用已初始化完成
    if (window.ng && rootEl && ng.getComponent(rootEl)) {
      hasRun = true;
      callback();
    }
  }

  // 100ms轮询一次检测状态
  const timer = setInterval(check, 100);
  check();

  // 30秒超时兜底
  setTimeout(() => {
    clearInterval(timer);
    if (!hasRun) {
      hasRun = true;
      callback();
    }
  }, 30000);
}

额外说明 #

如果需要监听特定内部组件的加载，可以把MutationObserver的监听范围缩小到对应组件的父节点，同时匹配组件的选择器做判断即可，防抖和超时兜底的时长可以根据项目实际加载速度灵活调整。

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