網站搜尋

typescript - Angular | 創建 Observable 無法工作


在 Angular6 中,我正在建立一個 Injectable 服務。我正在嘗試在 constructor 中初始化一個 Observable,請參見下面的簡化代碼。

問題: Observable.create 的回呼函式從未被執行,且也沒有任何錯誤。為什麼 console.log('authObserver created!') 從未被呼叫?

import { Observable, Observer } from 'rxjs';

@Injectable()
export class UserLoginService implements OnInit{

  authObserver:Observer;
  authObservable:Observable;

  constructor() {
    this.authObservable = Observable.create((observer: Observer) => {
      this.authObserver = observer;
      console.log('authObserver created!')
    });  
  }    
}

randomCallbackFunction(){
  this.authObserver.next("Button has been clicked");
}

答案#1

在你的程式碼中,我沒有看到有任何訂閱發生。Observables 只有在訂閱後才會起作用。試試這個

this.authObservable = Observable.create((observer: Observer) => {
      this.authObserver = observer;
      console.log('authObserver created!')
    });
this.authObservable.subscribe()

你可以在這裡看到它的運作

答案#2

你需要訂閱並注意正確地將新的值推送如下:

/*
 Create an observable that emits 'Hello' and 'World' on  
 subscription.
*/
 const hello = Rx.Observable.create(function(observer) {
    observer.next('Hello');
    observer.next('World');
 });

 //output: 'Hello'...'World'
  const subscribe = hello.subscribe(val => console.log(val));

看看這個 Fiddle。