Sebuah diamati memungkinkan Anda untuk berlangganan hanya sedangkan subjek memungkinkan Anda untuk kedua mempublikasikan dan berlangganan.
Jadi subjek memungkinkan layanan Anda digunakan sebagai penerbit dan pelanggan.
Sampai sekarang, saya tidak begitu pandai Observablesehingga saya hanya akan membagikan contoh Subject.
Mari kita mengerti lebih baik dengan contoh CLI Angular Jalankan perintah di bawah ini:
npm install -g @angular/cli
ng new angular2-subject
cd angular2-subject
ng serve
Ganti konten app.component.htmldengan:
<div *ngIf="message">
{{message}}
</div>
<app-home>
</app-home>
Jalankan perintah ng g c components/homeuntuk menghasilkan komponen rumah. Ganti konten home.component.htmldengan:
<input type="text" placeholder="Enter message" #message>
<button type="button" (click)="setMessage(message)" >Send message</button>
#messageadalah variabel lokal di sini. Tambahkan properti message: string;
ke kelas app.component.ts's.
Jalankan perintah ini ng g s service/message. Ini akan menghasilkan layanan di src\app\service\message.service.ts. Berikan layanan ini ke aplikasi .
Impor Subjectke MessageService. Tambahkan subjek juga. Kode akhir akan terlihat seperti ini:
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
}
}
Sekarang, suntikkan layanan ini home.component.tsdan berikan instance ke konstruktor. Lakukan ini app.component.tsjuga. Gunakan contoh layanan ini untuk meneruskan nilai #messageke fungsi layanan 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);
}
}
Di dalam app.component.ts, berlangganan dan berhenti berlangganan (untuk mencegah kebocoran memori) ke 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();
}
}
Itu dia.
Sekarang, setiap nilai masuk dalam #messagedari home.component.htmlakan dicetak ke {{message}}dalamapp.component.html
