আপডেট: 9/24/16 কৌনিক 2.0 স্থিতিশীল
এই প্রশ্নটি এখনও অনেক ট্র্যাফিক পায়, তাই, আমি এটি আপডেট করতে চেয়েছিলাম। আলফা, বিটা এবং R টি আরসি পরীক্ষার্থীর পরিবর্তনের উন্মাদতার সাথে আমি আমার এসও উত্তরগুলি স্থিতিশীল না হওয়া পর্যন্ত আপডেট করা বন্ধ করে দিয়েছি।
সাবজেক্টস এবং রিপ্লেসুবজেক্টগুলি ব্যবহারের জন্য এটি উপযুক্ত ক্ষেত্রে
আমি ব্যক্তিগতভাবে ব্যবহার করতে পছন্দ করি ReplaySubject(1)কারণ এটি সর্বশেষ সঞ্চিত মানটি পাস করার অনুমতি দেয় যখন নতুন গ্রাহকরা দেরি হলেও সংযুক্ত করে:
let project = new ReplaySubject(1);
//subscribe
project.subscribe(result => console.log('Subscription Streaming:', result));
http.get('path/to/whatever/projects/1234').subscribe(result => {
//push onto subject
project.next(result));
//add delayed subscription AFTER loaded
setTimeout(()=> project.subscribe(result => console.log('Delayed Stream:', result)), 3000);
});
//Output
//Subscription Streaming: 1234
//*After load and delay*
//Delayed Stream: 1234
সুতরাং আমি যদি দেরীতে সংযুক্ত করি বা পরে লোড করা প্রয়োজন হয় তবে আমি সর্বদা সর্বশেষতম কলটি পেতে পারি এবং কলব্যাকটি অনুপস্থিত হওয়ার বিষয়ে চিন্তা করতে পারি না।
এটি আপনাকে নীচে চাপতে একই স্ট্রিমটি ব্যবহার করতে দেয়:
project.next(5678);
//output
//Subscription Streaming: 5678
তবে আপনি যদি 100% নিশ্চিত হন তবে আপনার কেবল একবার কল করা দরকার? উন্মুক্ত বিষয় এবং পর্যবেক্ষণযোগ্যগুলি ছেড়ে দেওয়া ভাল না তবে সর্বদা "" যদি তবে কি হয়? "
সেখানেই অ্যাসিঙ্কসুবজেক্ট আসবে।
let project = new AsyncSubject();
//subscribe
project.subscribe(result => console.log('Subscription Streaming:', result),
err => console.log(err),
() => console.log('Completed'));
http.get('path/to/whatever/projects/1234').subscribe(result => {
//push onto subject and complete
project.next(result));
project.complete();
//add a subscription even though completed
setTimeout(() => project.subscribe(project => console.log('Delayed Sub:', project)), 2000);
});
//Output
//Subscription Streaming: 1234
//Completed
//*After delay and completed*
//Delayed Sub: 1234
অসাধারণ! আমরা বিষয়টি বন্ধ করে দিলেও এটি এখনও লোড হওয়া শেষ জিনিসটির সাথে জবাব দিয়েছে।
আরেকটি বিষয় হ'ল আমরা কীভাবে সেই http কলটিতে সাবস্ক্রাইব করেছি এবং প্রতিক্রিয়াটি পরিচালনা করেছি। প্রতিক্রিয়াটি প্রক্রিয়া করতে মানচিত্রটি দুর্দান্ত।
public call = http.get(whatever).map(res => res.json())
কিন্তু আমাদের যদি এই কলগুলিতে বাসা বাঁধার দরকার হয়? হ্যাঁ আপনি একটি বিশেষ ফাংশন সহ বিষয়গুলি ব্যবহার করতে পারেন:
getThing() {
resultSubject = new ReplaySubject(1);
http.get('path').subscribe(result1 => {
http.get('other/path/' + result1).get.subscribe(response2 => {
http.get('another/' + response2).subscribe(res3 => resultSubject.next(res3))
})
})
return resultSubject;
}
var myThing = getThing();
তবে এটি অনেক এবং এর অর্থ এটি করতে আপনার কোনও ফাংশন প্রয়োজন। ফ্ল্যাটম্যাপ প্রবেশ করুন :
var myThing = http.get('path').flatMap(result1 =>
http.get('other/' + result1).flatMap(response2 =>
http.get('another/' + response2)));
মিষ্টি, এটি varএমন একটি পর্যবেক্ষণযোগ্য যা চূড়ান্ত HTTP কল থেকে ডেটা পায় gets
ঠিক আছে দুর্দান্ত তবে আমি একটি কৌনিক 2 পরিষেবা চাই!
আমি আপনাকে পেয়েছি:
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { ReplaySubject } from 'rxjs';
@Injectable()
export class ProjectService {
public activeProject:ReplaySubject<any> = new ReplaySubject(1);
constructor(private http: Http) {}
//load the project
public load(projectId) {
console.log('Loading Project:' + projectId, Date.now());
this.http.get('/projects/' + projectId).subscribe(res => this.activeProject.next(res));
return this.activeProject;
}
}
//component
@Component({
selector: 'nav',
template: `<div>{{project?.name}}<a (click)="load('1234')">Load 1234</a></div>`
})
export class navComponent implements OnInit {
public project:any;
constructor(private projectService:ProjectService) {}
ngOnInit() {
this.projectService.activeProject.subscribe(active => this.project = active);
}
public load(projectId:string) {
this.projectService.load(projectId);
}
}
আমি পর্যবেক্ষক এবং পর্যবেক্ষণযোগ্যদের একটি বড় ভক্ত তাই আমি আশা করি এই আপডেটটি সাহায্য করবে!
আসল উত্তর
আমি এই একটি ব্যবহারের একটি ব্যবহার ক্ষেত্রে দেখা যায় পর্যবেক্ষণযোগ্য বিষয় বা ।Angular2EventEmitter
আপনার পরিষেবাতে আপনি এমন একটি তৈরি করেন EventEmitterযা আপনাকে এর উপর মানগুলিকে চাপতে দেয়। ইন আলফা 45 আপনার সাথে রুপান্তরিত করতে হবে toRx(), কিন্তু আমি জানি তারা যে পরিত্রাণ পেতে কাজ করছিল, তাই আলফা 46 আপনি কেবল আসতে সক্ষম হতে পারে EvenEmitter।
class EventService {
_emitter: EventEmitter = new EventEmitter();
rxEmitter: any;
constructor() {
this.rxEmitter = this._emitter.toRx();
}
doSomething(data){
this.rxEmitter.next(data);
}
}
এই উপায় একক আছে EventEmitterআপনার বিভিন্ন পরিষেবা ফাংশনগুলিতে এখন এগিয়ে যেতে পারে এমন ।
আপনি যদি সরাসরি কোনও কল থেকে একটি পর্যবেক্ষণযোগ্য ফিরিয়ে দিতে চান তবে আপনি এই জাতীয় কিছু করতে পারেন:
myHttpCall(path) {
return Observable.create(observer => {
http.get(path).map(res => res.json()).subscribe((result) => {
//do something with result.
var newResultArray = mySpecialArrayFunction(result);
observer.next(newResultArray);
//call complete if you want to close this stream (like a promise)
observer.complete();
});
});
}
এটি আপনাকে উপাদানটিতে এটি করতে দেয়:
peopleService.myHttpCall('path').subscribe(people => this.people = people);
এবং আপনার সেবার কল থেকে প্রাপ্ত ফলাফলগুলির সাথে গণ্ডগোল।
আমি তৈরি করতে চাই EventEmitter অন্যান্য উপাদান থেকে এটিতে অ্যাক্সেস পাওয়ার প্রয়োজন হলে আমি নিজেই স্ট্রিম তবে আমি উভয় উপায়েই কাজ করতে দেখতে পেলাম ...
এখানে এমন এক প্লাঙ্কার যা ইভেন্ট ইমিটারের সাথে একটি প্রাথমিক পরিষেবা দেখায়: Plunkr