要实现Angular 6消息总线,可以使用一个共享服务来传递消息。以下是一个包含代码示例的解决方案:
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class MessageService {
private subject = new Subject();
sendMessage(message: string) {
this.subject.next({ text: message });
}
clearMessage() {
this.subject.next();
}
getMessage() {
return this.subject.asObservable();
}
}
import { Component } from '@angular/core';
import { MessageService } from './message.service';
@Component({
selector: 'app-sender',
template: `
`
})
export class SenderComponent {
constructor(private messageService: MessageService) {}
sendMessage() {
this.messageService.sendMessage('Hello, World!');
}
}
import { Component, OnInit } from '@angular/core';
import { MessageService } from './message.service';
@Component({
selector: 'app-receiver',
template: `
接收到的消息: {{ message }}
`
})
export class ReceiverComponent implements OnInit {
message: string;
constructor(private messageService: MessageService) {}
ngOnInit() {
this.messageService.getMessage().subscribe(message => {
this.message = message.text;
});
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SenderComponent } from './sender.component';
import { ReceiverComponent } from './receiver.component';
import { MessageService } from './message.service';
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent, SenderComponent, ReceiverComponent],
providers: [MessageService],
bootstrap: [AppComponent]
})
export class AppModule {}
通过这种方式,SenderComponent可以发送消息到MessageService,ReceiverComponent可以订阅MessageService来接收消息。当SenderComponent调用sendMessage方法时,ReceiverComponent将接收到消息并显示在页面上。
希望以上解决方案能够解决你的问题!