Typescript Angular - Observable:如何改变它的价值？

Question

也许我错过了什么.我找不到Observable及其语法的简单教程.我正在使用Angular,我需要从服务中调用一个函数(在一个组件中定义).我读了这个解决方案.但我无法弄清楚如何更改服务中创建的Observable中的值(可能创建不是最好的方法).

我有一个像解决方案中的组件:

@Component({
  selector: 'my-component',
  ...
)}
export class MyComponent {
   constructor(myService:MyService) {
   myService.condition.subscribe(value => doSomething(value));
}

doSomething(value) {
  if (value) // do stuff
  else // other stuff
}

}

这是我的服务:

import { Injectable } from '@angular/core';
import { Observable} from 'rxjs/Observable';

@Injectable()

export class MyService {
    private condition: Observable<boolean>;
    constructor() { 
       this.condition= new Observable(ob => {ob.next(false); })
       // maybe ob.next is not the best solution to assign the value?
    }

    change() {// how can i change the value of condition to 'true', to call
              // the doSomething function in the component?? 
    }

}

Answer 1

从我对其他答案的评论(保留,因为它可能对某人有帮助),你似乎想利用某些东西的力量随着时间的推移发出价值.

正如DOMZE提出的那样,使用一个主题,但这里有一个(平凡的)示例,展示了如何做到这一点.虽然直接使用Subject有明显的一些缺陷,但我会把它留给你.

import { Component, NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Observable, Subject } from 'rxjs/Rx';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Open the console.</h2>
    </div>
  `,
})
export class App {

  constructor() {}

  let subject = new Subject();

  // Subscribe in Component
  subject.subscribe(next => {
    console.log(next);
  });

  setInterval(() => {
    // Make your auth call and export this from Service
    subject.next(new Date())
  }, 1000)
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Plunker

在我看来,对于这种情况,我不明白为什么一个简单的Service/Observable是不够的,但这不关我的事.

进一步阅读:角度2 - 行为主体与可观察？

Answer 2

我想解释一下如何在您要更新值的情况下使用Observables，但我不会使用您的示例。我将仅展示几行用ES5编写的代码并进行解释。

var updateObservable; // declare here in order to have access to future function

var observable = rx.Observable.create(function (observer) {
  observer.next(1);
  observer.next(2);
  observer.next(3);

  // attach a function to the variable which was created in the outer scope
  // by doing this, you now have your 'updateObservable' as a function and the reference to it as well
  // You will be able to call this function when want to update the value
  updateObservable = function (newValue) {
    observer.next(newValue);
    observer.complete();
  };
});

// Suppose you want to update on click. Here actually can be whatever (event) you want
vm.click = function () {
  // you can call this function because you have a reference to it
  // and pass a new value to your observable
  updateObservable(4);
};

// your subscription to changes
observable.subscribe(function(data) {
  // after 'click' event will be performed, subscribe will be fired
  // and the '4' value will be printed
  console.log(data);
});

这里的主要思想是，如果要更新Observable的值，则必须在“ create”函数中执行此操作。如果您在此“创建”函数中声明一个函数，这将是可能的。