Promise解析何时调用方法

Question

我有一个可以显示图像的组件a:

<img *ngIf="manageImgService.isImg" (click)="manageImgService.hideImg()" src="...">

我也有一个服务(manageImgService)来管理当图像显示:

export class manageImgService{
isImg = false;
session?: Promise<'wasClosed'>;
showImg() {
if (this.isImg) return;
this.isOpen = true;
this.session = new Promise<1>((resolve) => {
//help
});
return this.session;
}
hideImg() {
if (!this.session) return;
//help
this.session = undefined;
this.isOpen = false;
}
}

我需要这个，这样我就可以显示来自另一个组件B的图像，并且当图像再次关闭时，组件B也会被通知。

export class otherBComponent {
constructor(private manageImgService: ManageImgService){}
showImg(){
const res = this.manageImgService.showImg()
if (!res) return;
res.then((value) => console.log('image was hidden'));
}
}

我怎样才能使这个逻辑工作?

非常感谢!

Answer 1

如果你使用的是Angular(默认情况下内置了RxJS)，这种行为可以使用Subject

来实现。

export class manageImgService {
isImageShownSubject: Subject<boolean> = new Subject<boolean>
}

export class otherBComponent {
constructor(private manageImgService: ManageImgService){}
ngOnInit() {
this.watchForImageChanges()
}
// How to notify a component of changes to the image display state
watchForImageChanges(){
this.manageImgService.isImageShownSubject
.asObservable()
.subscribe({
next: (isImageShown: boolean) => {
// Logic goes here
console.log(isImageShown)
}
})
}
// How to change the display state of the image from the component
showImgFromComponent(): void {
this.manageImgService.isImageShownSubject.next(true);
}
hideImgFromComponent(): void {
this.manageImgService.isImageShownSubject.next(false);
}
}

在实践中，BehaviorSubject可能更可取，因为这也允许您在创建主题时发出默认值(普通主题仅在第一次调用.next()时发出值)

export class manageImgService {
isImageShownSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true) // default value goes here
// ...
}

如果模板中只需要isImageShown的值，可以通过使用async管道进一步简化。也不需要在组件.ts文件中公开此值，因此可以省略watchForImageChanges。

export class otherBComponent {
constructor(public manageImgService: ManageImgService) {}
}

<div>{{ manageImgService.isImageShownSubject | async }}</div>
// Will show true or false and update whenever the subject emits a new value