message.service.ts
// 创建可观察对象
import { Injectable } from '@angular/core';
import {Observable} from 'rxjs';
import { Subject } from 'rxjs';
@Injectable()
export class MessageService {
private subject = new Subject<any>();
sendMessage(message: string) {
this.subject.next({ text: message });
}
clearMessage() {
this.subject.next();
}
getMessage(): Observable<any> {
return this.subject.asObservable();
}
}
home.component.ts
import { Component } from '@angular/core';
import { MessageService } from 'src/app/service/single.service'
import { Subscription } from 'rxjs';
@Component({
templateUrl: 'home.component.html'
})
export class HomeComponent OnDestroy
{
subscription: Subscription;
constructor(private messageService: MessageService) {
// 创建观察者
this.subscription = this.messageService.getMessage()
.subscribe(message => { console.log('message', message) });
this.sendMessage() // 发短信
}
sendMessage(): void { // 发送消息
this.messageService.sendMessage('Message from Home Component to App Component!');
}
clearMessage(): void { // 清除消息
this.messageService.clearMessage();
}
ngOnDestroy() {
// 关闭监听
this.subscription.unsubscribe();
}
}