Typescript Angular - Observable：如何更改其值？

Question

也许我错过了一些东西。我无法找到Observable及其语法的简单教程。我正在使用Angular，我需要从服务中调用一个函数（在一个组件中定义）。我读了solution。但我无法弄清楚如何改变服务中创建的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

从关于my other answer的评论（因为它可能对某人有帮助而被保留），您似乎想要利用某些东西的强大功能随着时间的推移。

由于DOMZE提出，使用主题，但这里是一个（微不足道）示例如何你可以做到这一点。虽然有明显的some pitfalls to avoid in using Subject directly，但我会留给你的。

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

在我的愚见，对于这种情况，我不明白为什么一个简单的服务/可观察是不够的，但是这是我的事。

延伸阅读：Angular 2 - Behavior Subject vs Observable?

Answer 2

我建议你改变你的病情是一个主题。主题既是观察者又是观察者。然后您将能够发出一个值。

见https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/subjects.md

Answer 3

管理登录状态

对于此实现，您只需要一个服务。在它中，你可以让你的后端请求查看用户是否有会话，然后你可以将它保存在服务中的类变量中。然后，如果该变量已设置，则返回该变量，或直接返回REST调用的结果。

例如：

export class AuthenticationService { 

private loggedIn: boolean = null; 

constructor(private http: Http) { } 

getUserSession(credentials): Observable<boolean> { 

    if (this.loggedIn !== null) { 

    return Observable.of(this.loggedIn); 

    } else { 

    return this.http.get('/authenticate?' + credentials) 
     .map((session: Response) => session.json()) 
     .catch(e => { 
     // If a server-side login gate returns an HTML page... 
     return Observable.of(false); 
     }); 

    } 
} 

然后在组件，只需订阅可观察像往常一样，并作用于它的点播。

没有与Observable.share()和Observable.replay()实现这一

可观察语法

解答有关的Rx可观察到的Angular2语法问题的一部分，其他的方法（应该有人谷歌它），在一般形式是：

在服务：

return this.http.get("/people", null) 
    .map(res.json()) 
    .catch(console.error("Error in service") 

，且在组件，通过示例的方式：

this.someService.getPeople() 
    .subscribe(
    people => this.people, 
    error => console.warn('Problem getting people: ' + error), 
    () => this.doneHandler(); 
); 

形式上：

interface Observer<T> { 
    onNext(value: T) : void 
    onError(error: Error) : void 
    onCompleted() : void 
} 

接收到“下一个”值时，第一函数被调用。在REST调用的情况下（最常见的情况），这包含整个结果。

第二个函数是错误处理程序（在服务中调用Observable.trow（）的情况下）。

当结果集已有并且不带参数时调用最后一个。这是您可以调用doSomething（）函数的地方。