Javascript 角度2我需要分享的观测值

我有一个用于搜索的表单输入。当用户在搜索输入中输入内容时，我需要调用两个单独的api。这就是我想要实现的目标：

myInput: new FormControl();
listOne: Observable<string[]>;
listTwo: Observable<string[]>;

ngOnInit(){
    this.listOne = this.myInput.valueChanges
                     .debounceTime(500)
                     .distinctUntilChanged()
                     .switchMap(myInput => this._service.getListOne(myInput));

    this.listTwo = this.myInput.valueChanges
                     .debounceTime(500)
                     .distinctUntilChanged()
                     .switchMap(myInput => this._service.getListTwo(myInput));
}

myInput:newformcontrol（）；
列表一：可观察；
清单二：可观察；
恩戈尼尼特（）{
this.listOne=this.myInput.valueChanges
.debounceTime（500）
.distinctUntilChanged（）
.switchMap（myInput=>this._service.getListOne（myInput））；
this.listwo=this.myInput.valueChanges
.debounceTime（500）
.distinctUntilChanged（）
.switchMap（myInput=>this._service.getListTwo（myInput））；
}

---

所以我的问题是，我如何订阅valueChanges并调用2个不同的api来填充2个不同的数组？使用上面的代码，它在初始搜索时非常有效，但是当我更改搜索文本时，只调用getListTwo。

每当源有多个订阅者，并且您希望这些订阅者从该源读取相同的值时（换句话说，您希望将源值多播到多个订阅者），您应该

共享

这里的意思是：

sharedSource=this.myInput.valueChanges.debounceTime（500）.distinctUntilChanged（）.share（）

，例如：

myInput: new FormControl();
listOne: Observable<string[]>;
listTwo: Observable<string[]>;

ngOnInit(){
    this.listOne = sharedSource
                     .switchMap(myInput => this._service.getListOne(myInput));

    this.listTwo = sharedSource
                     .switchMap(myInput => this._service.getListTwo(myInput));
}

myInput:newformcontrol（）；
列表一：可观察；
清单二：可观察；
恩戈尼尼特（）{
this.listOne=sharedSource
.switchMap（myInput=>this._service.getListOne（myInput））；
this.listwo=sharedSource
.switchMap（myInput=>this._service.getListTwo（myInput））；
}

---

您可以查看多播与冷流的详细说明。

每当源有多个订户，并且您希望这些订户从该源读取相同的值时（换句话说，您希望将源值多播到多个订户），您应该

共享

ngOnInit(){
  input$ = this.myInput.valueChanges.debounceTime(500)
                         .distinctUntilChanged()
                         .share();

  this.listOne = input$.switchMap(myInput => this._service.getListOne(myInput));
  this.listTwo = input$.switchMap(myInput => this._service.getListTwo(myInput));

  //store subscriptions
  this.subs$.push(input$,this.listOne,this.listTwo);
}

这里的意思是：
sharedSource=this.myInput.valueChanges.debounceTime（500）.distinctUntilChanged（）.share（）
，例如：

myInput: new FormControl();
listOne: Observable<string[]>;
listTwo: Observable<string[]>;

ngOnInit(){
    this.listOne = sharedSource
                     .switchMap(myInput => this._service.getListOne(myInput));

    this.listTwo = sharedSource
                     .switchMap(myInput => this._service.getListTwo(myInput));
}

myInput:newformcontrol（）；
列表一：可观察；
清单二：可观察；
恩戈尼尼特（）{
this.listOne=sharedSource
.switchMap（myInput=>this._service.getListOne（myInput））；
this.listwo=sharedSource
.switchMap（myInput=>this._service.getListTwo（myInput））；
}

您可以查看多播与冷流的详细说明

ngOnInit(){
  input$ = this.myInput.valueChanges.debounceTime(500)
                         .distinctUntilChanged()
                         .share();

  this.listOne = input$.switchMap(myInput => this._service.getListOne(myInput));
  this.listTwo = input$.switchMap(myInput => this._service.getListTwo(myInput));

  //store subscriptions
  this.subs$.push(input$,this.listOne,this.listTwo);
}

请记住取消订阅以避免内存泄漏：

ngOnDestroy(){
    this.subs$.forEach(s => s.unsubscribe());
}

请记住取消订阅以避免内存泄漏：

ngOnDestroy(){
    this.subs$.forEach(s => s.unsubscribe());
}

我想我应该把subs$声明为数组？为什么要存储订阅？这只用于取消订阅吗？@garethb
Array
。我存储它们，以便取消订阅并避免内存泄漏。如果需要将订阅传递给其他组件或服务，您还需要存储订阅。我必须声明为Array，但现在所有订阅都正常工作+1用于提醒取消订阅！我想我应该把subs$声明为数组？为什么要存储订阅？这只用于取消订阅吗？@garethb
Array
。我存储它们，以便取消订阅并避免内存泄漏。如果需要将订阅传递给其他组件或服务，您还需要存储订阅。我必须声明为Array，但现在所有订阅都正常工作+1用于提醒取消订阅！我将如何取消对observable的订阅？我需要取消订阅sharedSource还是listOne/listTwo？因为我没有调用subscribe，所以看起来unsubscribe不可用。好吧，subscribe是在某处调用的，所以如果不是您，它就是框架，这意味着框架也调用unsubscribe。当调用该取消订阅时，上层流也将被取消订阅。如果是这样的话，你就不必做任何事情。你是对的，在ng for中使用Angular2和异步管道在框架中获取一个可观察的和订阅/取消订阅。例如ng for=“let x of listOne | async”我将如何取消订阅observable？我需要取消订阅sharedSource还是listOne/listTwo？因为我没有调用subscribe，所以看起来unsubscribe不可用。好吧，subscribe是在某处调用的，所以如果不是您，它就是框架，这意味着框架也调用unsubscribe。当调用该取消订阅时，上层流也将被取消订阅。如果是这样的话，你就不必做任何事情。你是对的，在ng for中使用Angular2和异步管道在框架中获取一个可观察的和订阅/取消订阅。例如ng for=“让列表的x为异步”