Rxjs：如何从一个 observable 切换到另一个 mid stream

Question

目前，我正在努力实现以下目标： - 我有一个文本输入框和一个按钮。单击按钮时，从输入中获取值（通过 rxjs）。

以下是我的设置。当前有一个单击按钮的 Observable，我有一个当前正在更新 BehaviorSubject 的输入文本字段。我正在努力执行或解决的问题是，当一个值被发送到点击流然后 'switch' 到输入流时，传递给订阅的就是输入值。

目前传递给订阅的值始终是 BehaviorSubject 类型（当我没有使用 BS 时最初是 Observable）。

@Component({
  selector: 'app-global-dashboard',
  template: `
     <input type="text" name="" id="new-country-input" 
     (keyup)="countryInput$.next($event.target.value)">
     <button (click)="handleAddCountryClick()" id="add-country">Add 
     country</button>

     <ul>
      <li *ngFor="let tile of tiles">
       {{tile.name}}
      </li>
     </ul>
  `,
  styleUrls: ['./global-dashboard.component.scss']
})
export class GlobalDashboardComponent implements OnInit, AfterViewInit 
{

   public countryInput = '';
   public countryInput$ = new BehaviorSubject<string>('');
   public tiles: object[];

   constructor(private http: Http) {
     this.tiles = [];
   }

   ngAfterViewInit() {

      const button = document.querySelector('#add-country');
      const addClick$ = Observable.fromEvent(button, 'click');

      const inputAfterClick$ = addClick$
         .map(() => this.countryInput$);

      inputAfterClick$.subscribe((country) => {
         console.log('country', country); // < This is always BS type rather than the underlying string
         this.doRequest(country);
      });
  }

Answer 1

既然你用的是BehaviouralSubject，那么你只需要获取主题的当前值即可。无需切换流：

const addClick$ = Observable.fromEvent(button, 'click');

addClick$.subscribe(()=>{
    //this will give you the current value of your behavioural subject
    console.log(this.countryInput$.value);
})

如果你想以更"reactive"的方式获取输入的值，你最好使用Reactive Forms

Answer 2

将地图更改为平面地图

  const inputAfterClick$ = addClick$
     .flatMap(() => this.countryInput$);

Rxjs：如何从一个 observable 切换到另一个 mid stream

Rxjs: how to switch from one observable to another mid stream

rxjs

rxjs5

angular