angular - 如何使用订阅方法编写 Angular Clean 代码？

Question

如何在 Angular 中编写干净的代码以进行订阅？由于 Angular Typescript 的异步特性，我们必须processItems()在代码的不同位置编写一个方法。一个位置，没有对话框警告，一个位置在对话框关闭的订阅内。

有没有办法将代码集中在一个地方？

目前：

public validateProductOrder(){
    if (this.product.cost > 1000){
        this.runMaterialDialogBoxWarning();
    }
    else if (this.product.addressType == 'International'){
        this.sendConfirmationEmailCode();
        this.runMaterialDialogBoxWarning();
    }
    else{
        this.processItems();
    }

public processItems(){
   this.processOrderForm();
   this.deliverShipping();
}


runMaterialDialogBoxWarning(){

    materialDialogBoxRef.afterClosed().subscribe(result=> {
        if (data.submit == true){
            this.processItems();   // this is another location we have to write processItems();
        });

理想方法：

public validateProductOrder(){
    if (this.product.cost > 1000){
        this.runMaterialDialogBoxWarning();
        this.processItems();
    }
    else if (this.product.addressType == 'International'){
        this.sendConfirmationEmailCode();
        this.runMaterialDialogBoxWarning();
        this.processItems();

    }
    else{
        this.processItems();
    }

如果理想的方法是不可能的，那很好，只是好奇。通过订阅进行操作可能会使跟踪项目变得困难。

Answer 1

您可以尝试创建一个模仿对话框返回的响应的 observable，然后在一个地方订阅结果。

这样，该方法processItems将只在一个地方被调用。这是实现此目的的示例：

import { Observable, of } from 'rxjs';

// rest of the code

public validateProductOrder() {
  let obs: Observable<any>;

  if (this.product.cost > 1000) {
    obs = this.runMaterialDialogBoxWarning();
  } else if (this.product.addressType == 'International') {
    this.sendConfirmationEmailCode();
    obs = this.runMaterialDialogBoxWarning();
  } else {
    // Assign an observable with immediate response here.
    obs = of({submit: true});
  }

  // Subscribe to the observable here.
  obs.subscribe(data => {
    if (data.submit) {
      this.processItems();
    }
  });
}

public processItems() {
  this.processOrderForm();
  this.deliverShipping();
}

runMaterialDialogBoxWarning() {
  return materialDialogBoxRef.afterClosed();
}