टाइपस्क्रिप्ट कोणीय - अवलोकन: इसके मूल्य को कैसे बदला जाए?

Question

शायद मुझे कुछ याद आ रहा है। मुझे पर्यवेक्षक और इसके वाक्यविन्यास के लिए एक सरल ट्यूटोरियल नहीं मिल रहा है। मैं कोणीय के साथ काम कर रहा हूं, मुझे एक सेवा से एक फ़ंक्शन (एक घटक में परिभाषित) कॉल करने की आवश्यकता है। मैंने यह solution पढ़ा। लेकिन मैं यह नहीं समझ सकता कि सेवा में बनाए गए अवलोकन में मूल्य को कैसे बदला जाए (शायद सृजन सबसे अच्छा तरीका नहीं है)।

मैं समाधान में की तरह एक घटक है:

@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 पर (संरक्षित के बाद से यह किसी के लिए उपयोगी हो सकता है), तो आप कुछ समय की शक्ति से अधिक मूल्यों फेंकना लाभ उठाने के लिए चाहते करने लगते हैं।

डॉमज़ प्रस्तावित के रूप में, विषय का उपयोग करें, लेकिन यहां एक (छोटा) उदाहरण है दिखा रहा है कि आप ऐसा कर सकते हैं। यद्यपि स्पष्ट रूप से 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

प्रबंध लॉगिन राज्य

देखें इस कार्यान्वयन के लिए, आप केवल एक सेवा की जरूरत है। इसमें, आप अपने बैकएंड अनुरोध को यह देखने के लिए करेंगे कि उपयोगकर्ता के पास सत्र है या नहीं, और फिर आप इसे सेवा में क्लास वैरिएबल में सहेज सकते हैं। फिर, उस चर को वापस सेट करें यदि यह सेट है, या सीधे आरईएसटी कॉल का परिणाम वापस कर दें।

उदाहरण के लिए:

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); 
     }); 

    } 
} 

और फिर घटक में, बस हमेशा की तरह नमूदार की सदस्यता और मांग पर उस पर कार्रवाई।

वहाँ Angular2 में एक आरएक्स नमूदार की वाक्य रचना के बारे में सवाल का हिस्सा उत्तर देने के लिए

नमूदार सिंटेक्स

Observable.share() और Observable.replay() के साथ इस को प्राप्त करने के अन्य तरीके हैं (चाहिए कि किसी ने Google यह), सामान्य रूप है:

एक सेवा में:

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 
} 

जब "अगला" मूल्य प्राप्त होता है पहले समारोह कहा जाता है। आरईएसटी कॉल (सबसे आम मामले) के मामले में इसमें पूरा परिणाम होता है।

दूसरा फ़ंक्शन एक त्रुटि हैंडलर (मामले में Observable.trow() को सेवा में बुलाया गया था)।

आखिरी बार कहा जाता है जब परिणाम सेट होता है, और कोई पैरामीटर नहीं लेता है। यह वह जगह है जहां आप अपना doSomething() फ़ंक्शन कॉल कर सकते हैं।