如何重新订阅可观察的？

Question

I have a child component view in my angular2 appplication:

.ts

      ngAfterViewInit() {
         this.form1Observable = form1.myForm.valueChanges;
         this.form1Observable.subscribe(() => // some code);
      }

.html

   <select (change)="change($event) #select>
         <option value="0">New</option>
         <option value="1">Existing</option>
   </select>
        <div *ngIf="select.value == 0">
           <myForm1></myForm1>
       </div>
   <div *ngIf="select.value == 1">
          <myOtherForm></myOtherForm>
   </div>

If i change the select, i loose the subscription that i made on the ngAfterViewInit method, so i bind the change method in the select to subscribe again:

   change($event) {
      setTimeout(() => { 
         if($event.target.value == 0) {
         this.form1Observable.subscribe(() => // some code);
      }, 500)}
   //If not set this time out got an error sayng that form1 is undefined.

The problem is that when i execute this change($event) method, the subscription doesnt work. Why?

Answer 1

I would recommend just setting up the subscribe directly on the myForm.valueChanges and having it store a variable on the component. Then you can execute code on the variable instead of resubscribing. Copying valueChanges into a new variable won't get the updates sent to valueChanges .

If you wanted to create a new Observable from the valueChanges Observable, you could wrap its output in a ReplaySubject or BehaviorSubject method:

  ngAfterViewInit() {
     this.form1Observable = new ReplaySubject<any>();
     form1.myForm.valueChanges.subscribe((thing) => this.form1Observable.next(thing));

     this.form1Observable.subscribe(() => // some code)
  }

This seems counter-intuitive however, I'm sure depending on your use of the observable output that there's a better way for you to do this.