发出订阅值以进行输出

Question

在 Angular 中，获取可观察对象、订阅它并通过 EventEmitter 作为输出发出该值是一个好习惯吗？

在我的示例中，我有一个 ParentComponent，它接收一个普通对象“product”作为输入参数，但在子组件中，我将接收新的 ProductData 作为 Observable，我需要通过 Output 传回并更新初始普通 Product -目的。我有在子组件中处理的变体数据，一旦单击变体条目，就会从服务器获取新的 ProductData，该服务器应该刷新父组件中的当前数据视图。这是代码

##########ParentComponent##########
TS:
export class ProductViewComponent {

  @Input()
  product: Product;
 
 updateProduct(newVariantProduct: Product) {
    this.product = newVariantProduct;
 }
}

HTML:

<div>{{product.name}} - {{product.price}}</div>
<app-variants 
[variants]="product.variants" (getVariant)="updateProduct($event)">
</app-variants>

##########ChildComponent##########
TS:
export class ProductVariantsComponent {

  @Input()
  variants: ProductVariants[];
  
  @Output() getVariant = new EventEmitter<any>();

  loadProduct(variant: EmvProductColorVariant){
    this.productService.getProduct(variant.code).subscribe(p => {
        productColorVariant.emit(p);
    });
  }
}

HTML:
  <li
    *ngFor="let variant of variants"
    (click)="loadProduct(variant)">
    <img *ngIf="variant.picture" [src]="variant.picture" />
  </li>

我应该采用这种方法（当然最终也会取消订阅），还是有更好的方法来做到这一点？我通常不喜欢使用“订阅”，这对我来说看起来很可疑，但我不确定还有什么选择......

感谢您的帮助

Answer 1

我也尽量不使用订阅，但这并不是什么可疑的事情。您通过点击加载产品，所以我认为您不能在这里避免它。其实你不需要取消订阅，如果

getProduct

中的

productService

在第一次发射后就完成了。