Question

我有一个根据图像名称通过api加载图像blob url的管道。

 export class LoadingImageNamePipe implements PipeTransform {

   imageSub: Subscription;
   constructor(private getimage: GetFileService) {}

   transform(name: any) {
     return this.getimageurl(name);
   }


   result: BehaviorSubject < string > = new BehaviorSubject < string > ('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="300"><rect width="1000" height="1000" style="fill:rgb(189, 189, 189)"/></svg>');

   getimageurl(name: string) {
     this.imageSub = this.getimage.GetFile(name) !.subscribe(x => {
         this.result.next(( < any > x).changingThisBreaksApplicationSecurity);
     });
     return this.result;
   }

   ngOnDestroy()
   {
     this.imageSub.unsubscribe();
   }

}

我在模板中使用了上面的管道来加载不同的图像

  <img class="card-img-top sampul" [src]="imagename_1 | loadImageName | async">
  <img class="card-img-top sampul" [src]="imagename_2 | loadImageName | async">

获取网址的服务还可以，两个不同的图片有不同的网址。

问题是loadImageName管道导致相同的URL。

BehaviorSubject是否更新了所有相同的管道？

Answer 1

与角度中的component不同，pipe只会被构造一次并在多个地方使用时共享相同的实例。

由于您在多个地方从loadImageName订阅，因此当其值发生更改时，您的behaviorubject result将为这两者发送值，这会导致视图中的示例网址，因为它们共享相同的行为主题

由于您的this.getimage.GetFile已经返回了一个observable，您可以直接返回它，而且在使用AsyncPipe时也不需要取消订阅。

getimageurl(name: string) { return this.getimage.GetFile(name).pipe(map(x => ( < any > x).changingThisBreaksApplicationSecurity)); }

使用observable的管道没有得到预期的结果

1 个答案: