MessageService 代码如下
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class MessageService {
private messageSource = new Subject<string>();
message$ = this.messageSource.asObservable();
messageAction(name: string) {
this.messageSource.next(name);
}
}
发送消息的组件 代码如下
ts
import { Component} from '@angular/core';
import { MessageService } from '../service/message.service';
@Component({
selector: 'app-send',
templateUrl: './send.component.html',
styleUrls: ['./send.component.css']
})
export class SendComponent {
constructor(private messageService: MessageService) { }
sendMessage(action: string) {
this.messageService.messageAction(action);
}
html
<input #action>
<button (click)="sendMessage(action.value)">action</button>
接收消息的组件
ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { MessageService } from './service/message.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
action: string;
sub: Subscription;
ngOnInit(): void {
this.messageService.message$.subscribe(action => this.action = action);
}
ngOnDestroy(): void {
this.sub.unsubscribe(); //不要忘记取消订阅
}
constructor(private messageService: MessageService) {
}