如何在 Angular 6 中使用参数创建 observable？

Question

我想创建一个可以在 Angular 6 中传递一些参数的 observale。下面是在 Angular 站点https://angular.io/guide/observables 中创建 observable 的示例代码，但它没有解释如何传递任何参数。

// Create an Observable that will start listening to geolocation updates
// when a consumer subscribes.
const locations = new Observable((observer) => {
  // Get the next and error callbacks. These will be passed in when
  // the consumer subscribes.
  const {next, error} = observer;
  let watchId;

  // Simple geolocation API check provides values to publish
  if ('geolocation' in navigator) {
    watchId = navigator.geolocation.watchPosition(next, error);
  } else {
    error('Geolocation not available');
  }

  // When the consumer unsubscribes, clean up data ready for next subscription.
  return {unsubscribe() { navigator.geolocation.clearWatch(watchId); }};
});

// Call subscribe() to start listening for updates.
const locationsSubscription = locations.subscribe({
  next(position) { console.log('Current Position: ', position); },
  error(msg) { console.log('Error Getting Location: ', msg); }
});

// Stop listening for location after 10 seconds
setTimeout(() => { locationsSubscription.unsubscribe(); }, 10000);

我想要的是在订阅时将一些参数传递给 observable，我猜 observable 的定义可能如下所示：

const myobservable(a, b) = new Observable((observer) => {
  ...
})

你能告诉我怎么做吗？

Answer 1

您无法将参数传递给 subscribe ， subscribe 是一个回调函数，它将在发出可观察序列中的每个值时执行。

当您订阅时，您可以将值作为参数传递给函数 not subscribe 并使用该参数执行某些操作

SomeObservableFunction(10).subscribe(function(x){

});

为了了解 observable 的工作原理，请查看以下示例代码片段

 var observable = Observable.create(function(observer) {
      var sum = 0;
      for (var i = 1; i <= 4; i++) {
        if (i <= 3) {
          sum = sum + i;
           observer.next(i);  //You can emit each item from the observable also
        }
        if (i === 4) {
          setTimeout(
            i => {
              observer.next(sum);
              observer.complete();
            },
            5000,
            i
          );
        }
      }
    });

在这个示例代码中，我正在运行一个 for 循环并使用 Observer.next(value) 发出每个值，当 i 的值变为 4 时，您可以看到发出 3 个数字的总和并通过简单调用 observable 退出所有可观察序列。完全的（）;

Observables 是惰性的，这意味着上面的代码永远不会执行，除非你订阅它。

让我们订阅以获取每个值。我正在删除 lamda 表达式以更清楚地理解

 observable.subscribe({
      next: function(x) {

        console.log("got value " + x);
      },
      error: err => console.error("something wrong occurred: " + err),
      complete: function() {
         //when I become 4 it will complete
        console.log("completed");
      }
    });

在 next 的回调函数中，您将获得我们从 observable 发出的所有值，包括 sum 作为最终值，然后它将执行完整的回调函数。

您也可以像下面的语法一样简单地接收每个值，这类似于下一个回调

  observable.subscribe(function(x) {
      //here you will get all the value including sum
      console.log(x);
    });

让我通过简单地注释一行代码来告诉您使用相同示例的另一种场景。我没有发出每个值，而是只想从可观察的和完整的中发出总和。

 var observable = Observable.create(function(observer) {
      var sum = 0;
      for (var i = 1; i <= 4; i++) {
        if (i <= 3) {
          sum = sum + i;
            //commented the code
        }
        if (i === 4) {
          setTimeout(
            i => {
              observer.next(sum);
              observer.complete();
            },
            5000,
            i
          );
        }
      }
    });

现在，当您订阅时，您将只有一个值，即 sum

 observable.subscribe(function(x) {
      //here you will get the sum
      console.log(x);
    });

现在回到您的问题，要传递参数，您可以将整个 observable 包装到一个返回 observable 的函数中。例如

SomeObservableFunction(someparam){
var observable = Observable.create(function(observer) {
       //I am not writing the same code block here 
    });
return observable;
}