Angular 将错误从服务传递到组件

我试图理解值或错误如何从一个组件传递到另一个组件。 在我的例子中，我希望将错误从服务传递到组件，并且我有嵌套的方法

这将是一个虚构的例子。 这是服务中引发错误的方法

public serviceMethod(value1: Class1): Observable<Interface1>{
    return new Observable(result => {
      this.method1(class1) // this method throws an error and returns an number 
        .subscribe(decimalValue  => this.method2(decimalValue) // this method does an error check and returns an Interface1 type
          .subscribe(value2 => this.method3(value2, result, decimalValue)), error1 => throwError(error1)
        )
    })
  }

现在，当我运行这个时，我只得到抛出的error1的输出，而不是error2的输出

原因是错误是从method1抛出的，它没有到达其他方法2和3以返回错误结果

我想到的一个解决方案是在服务中使用布尔变量。 Like errorThrown=true，然后将其传递给组件。然后我可以在订阅中进行if检查。 如果errorThrown为true，那么也应该抛出error2

我不确定这是否是一个好的解决方案！一个问题是我不知道如何将这个错误发送到组件

---

关于什么可能是一个好的解决方案的任何建议或想法？

当外部观测失败时，内部观测将不会执行。所以在您的例子中，如果method1抛出错误，它将不会执行method2和method3。但是，如果要继续执行内部obseravbles，则必须捕获错误并将其作为正常值返回，以便继续执行

按如下方式修改服务类以捕获和处理错误：

...
import { of } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class MyService {
  method1() {
    const obs;
    // perform your logic and store the Observable in obs object

    /**
    * catch the error and convert it to a normal observable
    * for execution of inner observable to continue
    */
    return obs.pipe(catchError(err => of(err)));
  }

  // implement method2 and method3 in similar fashion
  ...

  serviceMethod() {
    return this.method1().pipe(
      concatMap(val1 => {
        console.log('result of method1: ', val1);
        return this.method2();
      }),
      concatMap(val2 => {
        console.log('result of method2: ', val2);
        return this.method3();
      })
    );
  }
}

请注意，我使用concatMap rxjs操作符来表示相互依赖的观测值，因为创建嵌套订阅是一种反模式，不建议使用。concatMap将自动为您订阅内部观测值，因此不要手动订阅。有关concatMap的更多信息，请查看此项

现在，在您的组件类中，从服务类订阅serviceMethod，如下所示：

this.service.serviceMethod().subscribe(
  val => {
    console.log("End result: ", val);
  },
  err => {
    console.error("Error -> ", err);
  }
);

---

现在，您可以执行内部观测值，即使外部观测值抛出错误。有关完整示例，请参阅此。打开右侧渲染器的控制台以查看结果。

此设置不起作用，因为我也需要method2中的val1，并且我与类型不匹配this@dernor00你能在Stackblitz中分享你的应用程序的一个最小版本吗？我在这里写了一个示例，说明所有东西是如何像真实代码中那样连接的。像在真实的应用程序中一样共享所有代码会有点复杂，因为我连接到后端并从那里获取一些值。这种情况我不能在这里重现。我可以提到的一点是，我今天尝试将错误从服务传递到组件，但我遇到了问题，因为它无法工作。如果你能看到这一部分，我将非常感激：@dernor00除非你分享你面临问题的特定代码，否则我只能继续猜测。由于您面临类型不匹配问题，所以您可以在捕获错误时抛出subscribe方法所期望的类型的对象，而不是错误消息字符串。这将为您解决问题。例如，在这里，当我捕获到一个错误时，我返回-1，因为method1期望的结果是number类型。

this.service.serviceMethod().subscribe(
  val => {
    console.log("End result: ", val);
  },
  err => {
    console.error("Error -> ", err);
  }
);