Angular中如何使用Callback确保代码按顺序执行？

首先要明确：你的第一部分代码（添加CSS类）是同步操作，当前代码本身就会先执行完第一部分，再进入第二部分的switch逻辑。但如果fadeMeOut是带有过渡/动画效果的CSS类，你需要等待动画结束后再执行第二部分，那才需要用回调或者Promise来处理，以下是具体实现方案：

方式一：使用回调函数 #

把第一部分逻辑封装成带回调的函数，执行完（或动画结束）后调用回调触发第二部分：

async getExample(value: string) {
  // 封装第一部分逻辑为带回调的函数
  const handleFadeOut = (callback: () => void) => {
    if (this.componentRef) {
      const element = this.componentRef.location.nativeElement;
      element.classList.add('fadeMeOut');
      
      // 监听动画/过渡结束事件，确保动画完成后再执行回调
      const onAnimationEnd = () => {
        // 移除监听避免内存泄漏
        element.removeEventListener('transitionend', onAnimationEnd);
        element.removeEventListener('animationend', onAnimationEnd);
        callback();
      };
      
      // 兼容过渡动画和关键帧动画
      element.addEventListener('transitionend', onAnimationEnd);
      element.addEventListener('animationend', onAnimationEnd);
    } else {
      // 没有componentRef时直接执行回调
      callback();
    }
  };

  // 调用封装的函数，把第二部分逻辑作为回调传入
  handleFadeOut(async () => {
    switch (value) {
      case this.tag[0]: {
        await this.getAlbum();
        break;
      }
      default: {
        // 执行默认逻辑
        break;
      }
    }
  });
}

方式二：用Promise封装（适配Async/Await风格） #

如果更习惯用Promise+Async/Await的写法，也可以把第一部分封装成Promise，代码结构更整洁：

async getExample(value: string) {
  // 封装第一部分逻辑为Promise
  const fadeOut = () => {
    return new Promise<void>((resolve) => {
      if (!this.componentRef) {
        resolve();
        return;
      }
      
      const element = this.componentRef.location.nativeElement;
      element.classList.add('fadeMeOut');
      
      const onAnimationEnd = () => {
        element.removeEventListener('transitionend', onAnimationEnd);
        element.removeEventListener('animationend', onAnimationEnd);
        resolve();
      };
      
      element.addEventListener('transitionend', onAnimationEnd);
      element.addEventListener('animationend', onAnimationEnd);
    });
  };

  // 等待fadeOut完成后执行第二部分
  await fadeOut();
  
  switch (value) {
    case this.tag[0]: {
      await this.getAlbum();
      break;
    }
    default: {
      // 执行默认逻辑
      break;
    }
  }
}

注意事项 #

• 如果fadeMeOut只是单纯添加样式、没有动画效果，那原代码的执行顺序已经满足你的要求，不需要额外处理；
• 同时监听transitionend和animationend是为了兼容不同类型的CSS动画（过渡动画用transition，关键帧动画用animation）；
• 必须移除事件监听，避免组件销毁后残留事件导致内存泄漏。

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