如何实现调用hideImg时resolve Promise，让组件B监听图片关闭？

1. 修正并完善ManageImgService服务 #

核心逻辑是在打开图片时保存Promise的resolve函数，关闭图片时调用该函数完成Promise，以此向组件B发送通知。

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ManageImgService {
  isImg = false;
  session?: Promise<'wasClosed'>;
  // 存储Promise的resolve函数，用于后续触发关闭通知
  private resolveSession?: (value: 'wasClosed') => void;

  showImg() {
    if (this.isImg) return;

    this.isImg = true;
    this.session = new Promise<'wasClosed'>((resolve) => {
      // 保存resolve函数，供hideImg调用
      this.resolveSession = resolve;
    });
    return this.session;
  }

  hideImg() {
    if (!this.session || !this.resolveSession) return;

    // 调用resolve，通知组件B图片已关闭
    this.resolveSession('wasClosed');
    // 清理服务状态
    this.session = undefined;
    this.resolveSession = undefined;
    this.isImg = false;
  }
}

关键修正点： #

• 统一将原代码中的isOpen改为isImg，与组件A的*ngIf判断条件保持一致
• 添加private resolveSession变量存储Promise的resolve函数
• 在hideImg中先触发resolve完成Promise，再清理服务状态

2. 组件A代码保持不变（确保服务注入正确） #

组件A的点击事件已绑定关闭方法，只需保证服务实例正确注入：

<img *ngIf="manageImgService.isImg" (click)="manageImgService.hideImg()" src="你的图片地址">

3. 组件B逻辑无需修改 #

组件B调用showImg()后监听Promise的then回调，即可在图片关闭时收到通知：

import { Component } from '@angular/core';
import { ManageImgService } from './manage-img.service';

@Component({
  selector: 'app-other-b',
  template: `<button (click)="showImg()">显示图片</button>`
})
export class OtherBComponent {
  constructor(private manageImgService: ManageImgService){}

  showImg(){
      const res = this.manageImgService.showImg()
      if (!res) return;

      res.then((value) => console.log('image was hidden'));
  }
}

整体流程： #

1. 组件B调用showImg()，服务开启图片显示状态并返回一个未完成的Promise
2. 用户点击组件A的图片，触发hideImg()，服务调用resolve函数完成Promise
3. 组件B的then回调触发，输出关闭通知

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