在Angular 7中,可以使用服务来实现组件之间的通信。下面是一个示例解决方法,其中包含了代码示例:
// shared.service.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class SharedService {
private messageSource = new Subject();
public message$ = this.messageSource.asObservable();
constructor() { }
sendMessage(message: string) {
this.messageSource.next(message);
}
}
// sender.component.ts
import { Component } from '@angular/core';
import { SharedService } from './shared.service';
@Component({
selector: 'app-sender',
template: `
`
})
export class SenderComponent {
constructor(private sharedService: SharedService) { }
sendMessage() {
this.sharedService.sendMessage('Hello from sender component!');
}
}
// receiver.component.ts
import { Component, OnInit } from '@angular/core';
import { SharedService } from './shared.service';
@Component({
selector: 'app-receiver',
template: `
{{ message }}
`
})
export class ReceiverComponent implements OnInit {
message: string;
constructor(private sharedService: SharedService) { }
ngOnInit() {
this.sharedService.message$.subscribe(message => {
this.message = message;
});
}
}
// app.module.ts
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 { SharedService } from './shared.service';
@NgModule({
declarations: [
AppComponent,
SenderComponent,
ReceiverComponent
],
imports: [
BrowserModule
],
providers: [SharedService],
bootstrap: [AppComponent]
})
export class AppModule { }
上述代码示例中,SenderComponent中的按钮点击事件会调用SharedService中的sendMessage方法来发送消息。ReceiverComponent中通过订阅SharedService中的message$来接收并显示消息。
请注意,在提供共享服务时,将其添加到AppModule的providers数组中,以便在整个应用程序中共享该服务的实例。
希望以上解决方法能帮助到你!