在Angular 6中,可以通过服务在两个组件实例之间进行通信。下面是一个示例解决方法:
data.service.ts
的服务文件,用于在组件之间共享数据:import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
private messageSource = new BehaviorSubject("");
currentMessage = this.messageSource.asObservable();
constructor() { }
changeMessage(message: string) {
this.messageSource.next(message);
}
}
DataService
服务:import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-component1',
template: `
`
})
export class Component1 {
message: string;
constructor(private dataService: DataService) { }
sendMessage() {
this.dataService.changeMessage(this.message);
}
}
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-component2',
template: `
{{ message }}
`
})
export class Component2 implements OnInit {
message: string;
constructor(private dataService: DataService) { }
ngOnInit() {
this.dataService.currentMessage.subscribe(message => this.message = message);
}
}
Component1
组件中,通过调用dataService.changeMessage()
方法来改变消息的值,并在Component2
组件中订阅该消息。通过上述方法,Component1
组件可以向Component2
组件发送消息,并在Component2
组件中显示该消息。