একটি পর্যবেক্ষণযোগ্য আপনাকে কেবল সাবস্ক্রাইব করার অনুমতি দেয় যেখানে কোনও বিষয় আপনাকে প্রকাশ এবং সাবস্ক্রাইব উভয়কেই অনুমতি দেয়।
সুতরাং একটি বিষয় আপনার পরিষেবাগুলি প্রকাশক এবং গ্রাহক উভয় হিসাবে ব্যবহারের অনুমতি দেয় ।
এখন পর্যন্ত, আমি তেমন ভাল না Observableতাই আমি কেবল একটি উদাহরণ ভাগ করব Subject।
আসুন একটি কৌণিক সিএলআই উদাহরণ দিয়ে আরও ভালভাবে বুঝতে পারি । নীচের আদেশগুলি চালান:
npm install -g @angular/cli
ng new angular2-subject
cd angular2-subject
ng serve
এর সামগ্রীটি প্রতিস্থাপন করুন app.component.html:
<div *ngIf="message">
{{message}}
</div>
<app-home>
</app-home>
ng g c components/homeহোম উপাদান তৈরি করতে কমান্ডটি চালান । এর সামগ্রীটি প্রতিস্থাপন করুন home.component.html:
<input type="text" placeholder="Enter message" #message>
<button type="button" (click)="setMessage(message)" >Send message</button>
#messageএখানে স্থানীয় পরিবর্তনশীল। একটি সম্পত্তি যোগ message: string;
করার app.component.tsএর বর্গ।
এই আদেশটি চালান ng g s service/message। এটিতে একটি পরিষেবা উত্পন্ন করবে src\app\service\message.service.ts। অ্যাপ্লিকেশনটিতে এই পরিষেবা সরবরাহ করুন ।
আমদানি Subjectমধ্যে MessageService। একটি বিষয় যুক্ত করুন। চূড়ান্ত কোডটি এর মতো দেখাবে:
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class MessageService {
public message = new Subject<string>();
setMessage(value: string) {
this.message.next(value); //it is publishing this value to all the subscribers that have already subscribed to this message
}
}
এখন, এই পরিষেবাটি ইনজেক্ট করুন home.component.tsএবং এটির কনস্ট্রাক্টরের কাছে একটি উদাহরণ দিন। এটির app.component.tsজন্যও করুন। #messageপরিষেবা কার্যের মানটি পাস করার জন্য এই পরিষেবা উদাহরণটি ব্যবহার করুন setMessage:
import { Component } from '@angular/core';
import { MessageService } from '../../service/message.service';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent {
constructor(public messageService:MessageService) { }
setMessage(event) {
console.log(event.value);
this.messageService.setMessage(event.value);
}
}
এর ভিতরে app.component.ts, সাবস্ক্রাইব করুন এবং সাবস্ক্রাইব করুন (মেমরি ফাঁস রোধ করতে) Subject:
import { Component, OnDestroy } from '@angular/core';
import { MessageService } from './service/message.service';
import { Subscription } from 'rxjs/Subscription';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
message: string;
subscription: Subscription;
constructor(public messageService: MessageService) { }
ngOnInit() {
this.subscription = this.messageService.message.subscribe(
(message) => {
this.message = message;
}
);
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
এটাই.
এখন, কোনো মান ভিতরে প্রবেশ #messageএর home.component.htmlথেকে মুদ্রিত হইবে {{message}}ভিতরেapp.component.html
