২০১ 2016-০6-২ Ob আপডেট করুন: পর্যবেক্ষণযোগ্য ব্যবহারের পরিবর্তে, ব্যবহার করুন
- @ আবদুল্লাহমান একটি মন্তব্যে বা সুপারিশ অনুসারে একটি আচরণমূলক বিষয় ject
- @ জেসন গোয়েম্যাট একটি মন্তব্যে প্রস্তাবিত রিপ্লেসউবজেক্ট ject
একটি বিষয় উভয়ই পর্যবেক্ষণযোগ্য (যাতে আমরা এটি subscribe()করতে পারি) এবং একটি পর্যবেক্ষক (যাতে আমরা next()এটিতে একটি নতুন মান নির্গমন করতে বলতে পারি )। আমরা এই বৈশিষ্ট্যটি কাজে লাগাই। একটি বিষয় মানটিকে বহু পর্যবেক্ষকদের কাছে মাল্টিকাস্ট করার অনুমতি দেয়। আমরা এই বৈশিষ্ট্যটি কাজে লাগাই না (আমাদের কেবলমাত্র একটি পর্যবেক্ষক রয়েছে)।
বিহেভিয়ারসুবজেক্ট সাবজেক্টের একটি বৈকল্পিক। এটিতে "বর্তমান মান" ধারণাটি রয়েছে। আমরা এটি ব্যবহার করি: যখনই আমরা একটি পর্যবেক্ষণকারী উপাদান তৈরি করি, এটি স্বয়ংক্রিয়ভাবে আচরণবিধি থেকে বর্তমান নেভিগেশন আইটেমটির মান পাবে।
নীচের কোড এবং প্লাঙ্কার আচরণ আচরণ ব্যবহার করে।
রিপ্লেসউবজেক্ট হ'ল সাবজেক্টের আর একটি রূপ। আপনি যদি কোনও মান প্রকৃতপক্ষে উত্পাদিত না হওয়া পর্যন্ত অপেক্ষা করতে চান তবে ব্যবহার করুন ReplaySubject(1)। যখন কোনও আচরণ-সাবজেক্টের প্রাথমিক মান প্রয়োজন হয় (যা অবিলম্বে সরবরাহ করা হবে), রিপ্লেসউবজেক্টটি তা করে না। রিপ্লেসউবজেক্ট সর্বদা সর্বশেষতম মান সরবরাহ করবে, তবে এটির যে কোনও প্রাথমিক মান নেই তাই পরিষেবাটি প্রথম মানটি ফেরত দেওয়ার আগে কিছু অ্যাসিঙ্ক অপারেশন করতে পারে। এটি এখনও সাম্প্রতিকতম মান সহ পরবর্তী কলগুলিতে তত্ক্ষণাত্ জ্বলতে থাকবে। আপনি যদি কেবল একটি মান চান তবে first()সাবস্ক্রিপশনে ব্যবহার করুন। আপনি যদি ব্যবহার করেন তবে আপনার সদস্যতা বাতিল করতে হবে না first()।
import {Injectable} from '@angular/core'
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
@Injectable()
export class NavService {
// Observable navItem source
private _navItemSource = new BehaviorSubject<number>(0);
// Observable navItem stream
navItem$ = this._navItemSource.asObservable();
// service command
changeNav(number) {
this._navItemSource.next(number);
}
}
import {Component} from '@angular/core';
import {NavService} from './nav.service';
import {Subscription} from 'rxjs/Subscription';
@Component({
selector: 'obs-comp',
template: `obs component, item: {{item}}`
})
export class ObservingComponent {
item: number;
subscription:Subscription;
constructor(private _navService:NavService) {}
ngOnInit() {
this.subscription = this._navService.navItem$
.subscribe(item => this.item = item)
}
ngOnDestroy() {
// prevent memory leak when component is destroyed
this.subscription.unsubscribe();
}
}
@Component({
selector: 'my-nav',
template:`
<div class="nav-item" (click)="selectedNavItem(1)">nav 1 (click me)</div>
<div class="nav-item" (click)="selectedNavItem(2)">nav 2 (click me)</div>`
})
export class Navigation {
item = 1;
constructor(private _navService:NavService) {}
selectedNavItem(item: number) {
console.log('selected nav item ' + item);
this._navService.changeNav(item);
}
}
Plunker
মূল উত্তর একটি লক্ষণীয় ব্যবহার করে: (এটা আরো কোড এবং একটি BehaviorSubject ব্যবহার না করে যুক্তিবিজ্ঞান প্রয়োজন, সেই কারণে আমি এটা বলতে না, কিন্তু এটা শিক্ষামূলক হতে পারে)
সুতরাং, এখানে এমন একটি বাস্তবায়ন রয়েছে যা ইভেন্টএমিটারের পরিবর্তে একটি পর্যবেক্ষণযোগ্য ব্যবহার করে । আমার ইভেন্টইমিটার বাস্তবায়নের বিপরীতে, এই বাস্তবায়নটি বর্তমানে navItemপরিষেবায় নির্বাচিত বর্তমানে সঞ্চিত করে , যাতে যখন একটি পর্যবেক্ষণকারী উপাদান তৈরি করা হয়, তখন এটি API কলের মাধ্যমে বর্তমান মানটি পুনরুদ্ধার করতে navItem()পারে এবং তারপরে navChange$পর্যবেক্ষণযোগ্য মাধ্যমে পরিবর্তনের বিষয়ে অবহিত হতে পারে ।
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/share';
import {Observer} from 'rxjs/Observer';
export class NavService {
private _navItem = 0;
navChange$: Observable<number>;
private _observer: Observer;
constructor() {
this.navChange$ = new Observable(observer =>
this._observer = observer).share();
// share() allows multiple subscribers
}
changeNav(number) {
this._navItem = number;
this._observer.next(number);
}
navItem() {
return this._navItem;
}
}
@Component({
selector: 'obs-comp',
template: `obs component, item: {{item}}`
})
export class ObservingComponent {
item: number;
subscription: any;
constructor(private _navService:NavService) {}
ngOnInit() {
this.item = this._navService.navItem();
this.subscription = this._navService.navChange$.subscribe(
item => this.selectedNavItem(item));
}
selectedNavItem(item: number) {
this.item = item;
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
@Component({
selector: 'my-nav',
template:`
<div class="nav-item" (click)="selectedNavItem(1)">nav 1 (click me)</div>
<div class="nav-item" (click)="selectedNavItem(2)">nav 2 (click me)</div>
`,
})
export class Navigation {
item:number;
constructor(private _navService:NavService) {}
selectedNavItem(item: number) {
console.log('selected nav item ' + item);
this._navService.changeNav(item);
}
}
Plunker
আরও দেখুন কম্পোনেন্ট মিথস্ক্রিয়া Cookbook উদাহরণ , যা একটি ব্যবহার Subjectobservables ছাড়াও। যদিও উদাহরণটি "পিতামাতার এবং শিশুদের যোগাযোগ", একই কৌশল অবাস্তব উপাদানগুলির জন্য প্রযোজ্য।