angular2 - नेविगेट नमूदार के बाद पूरा

Question

है मैं बहुत की तरह एक http नमूदार है, मेरी UserService में:

logout() { 
    return this.http.delete(this.baseUrl + url, { 
      headers: this.headers() 
     }).map((res: IResponse) => { 
      var json = res.json(); 
      json.headers = res.headers; 
      return json; 
     }).subscribe((response) => { 
      //DO SOMETHING, THEN ---- 
      return res; 
     }); 
} 

मैं एक नमूदार बनाया है, और एक सदस्यता (response) जो लौट आए सफलता मूल्य है बनाया।

अब, मेरी घटक में, मैं UserService.logout() कॉल करने के लिए और फिर एक नया मार्ग पर नेविगेट हैं:

logout() { 
    this.userService.logout(); 
    this.router.navigate(['LandingPage']); 
    } 

जाहिर है, इस अतुल्यकालिक रूप से भी हो सकता है और मैं इससे पहले कि मैं लॉगआउट नेविगेट हो सकता है।

वादों का उपयोग करना, मैं कुछ इस तरह कर सकता है:

this.userService.logout().then(() => { this.router.navigate(['LandingPage']); });

मैं observables साथ एक ही बात कर सकते हैं कैसे? मेरे UserService कक्षा में मैं एक अवलोकन करने योग्य बनाना चाहता हूं, इसकी सदस्यता लेता हूं, सफलता या त्रुटि पर कुछ सामान करता हूं, फिर मेरे दृश्य घटक से नेविगेट करें।

Answer 1

आप वास्तव में logout विधि बना सकते हैं एक वादा वापस कर सकते हैं और इसे सामान्य के रूप में उपयोग करते हैं। यह प्रत्यक्ष होना जरूरी नहीं है:

logout() { 
    return new Promise((resolve, reject) => { 
     this.http.delete(this.baseUrl + url, { headers: this.headers() }) 
      .map((res: IResponse) => { 
       var json = res.json(); 
       json.headers = res.headers; 
       return json; 
      }) 
      .subscribe(data => { 
       //DO SOMETHING, THEN ---- 
       resolve(data); 
      }, error => reject(error)); 
    }); 
} 

logout() { 
    this.userService.logout().then(response => this.router.navigate(['LandingPage'])) 
} 

Answer 2

आप क्योंकि इसकी धारा अनिश्चित काल तक जारी हो सकता है एक Observable समाप्त होने की प्रतीक्षा नहीं कर सकते। लेकिन तुम subscribe विधि के अंदर router.navigate कह सकते हैं:

logout() { 
    return this.http.delete(this.baseUrl + url, { headers: this.headers() }) 
    .map((res: IResponse) => res.json()) 
    .subscribe((response) => { 
     //DO SOMETHING, THEN ---- 
     this.router.navigate(['LandingPage']); 
    }); 
    } 

यदि यह पर्याप्त नहीं है, subscribe रिटर्न एक Subscription जिसका unsubscribe विधि बंद हो जाता है Observable के डेटा के लिए इंतज़ार कर। तो यदि आपको करना है, तो आप टाइमआउट अवधि की प्रतीक्षा कर सकते हैं और unsubscribe पर कॉल कर सकते हैं।

Answer 3

अवलोकन करने योग्य ऑब्जेक्ट में अंततः विधि है, इसे आजमाएं। पहले आयात करने के लिए मत भूलना:

import 'rxjs/operators/finally'; 

आपका लॉगआउट() होगा:

import 'rxjs/add/operator/toPromise'; 

logout() { 
    return this.http.delete(this.baseUrl + url, { headers: this.headers() }) 
    .map(res => res.json()); 

component.ts

में:

logout() { 
    return this.http.delete(this.baseUrl + url, { headers: this.headers() }) 
    .map(res => res.json()) 
    .finally(() => this.router.navigate(['LandingPage'])) 
    .subscribe((response) => { 
     //DO SOMETHING, THEN ---- 

    }); 
    } 

तुम सच में वादा उपयोग करना चाहता था, तो

var aPromise = this.userService.logout().toPromise(); 
aPromise.then(() => { 
    this.router.navigate(['LandingPage']); 
}); 

Answer 4

लॉगआउट की आवश्यकता है एक पर्यवेक्षक एक सदस्यता नहीं है। उदाहरण के लिए:

logout(): Observable<T> { 
 
     return this.http.delete(this.baseUrl + url, { 
 
       headers: this.headers() 
 
      }).map((res: IResponse) => { 
 
       var json = res.json(); 
 
       json.headers = res.headers; 
 
       return json; 
 
      }) 
 
      .catch((err)=>Observable.empty()) // return empty if error 
 
      .share(); // to ensure that no duplicate http calls can occur 
 
    
 
    } 
 

 
    //in component: 
 

 
    this.service.logout() 
 
     .do(()=>this.router.navigate(['LandingPage']);)//do stuff 
 
     .subscribe((res:any)=>{}); 
 

 
    //or with template async pipe: 
 

 
    public result$ = Observable<T>; 
 

 
    result$ = this.service.logout() 
 
     .do(()=>//do stuff); 
 

 
    //in template: 
 
    
 
    {{(result$ | async)?.id}} 
 
    or simply 
 
    {{result$ | async}} 
 

 
    // P.s. do not forget about unsubscribe(), thats why I prefer to use async (since that's the Async pipe's job.)

ऑपरेटरों/तरीकों के बारे में अधिक जानकारी के लिए: https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/observable.md