要从一个组件订阅数据到另一个组件,可以使用Angular的服务和RxJS的Subject或BehaviorSubject。下面是一个示例解决方案:
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
private dataSubject = new Subject();
data$ = this.dataSubject.asObservable();
setData(data: any) {
this.dataSubject.next(data);
}
}
import { Component } from '@angular/core';
import { DataService } from 'path/to/data.service';
@Component({
selector: 'app-sender',
template: `
`
})
export class SenderComponent {
constructor(private dataService: DataService) {}
sendData() {
const data = { message: 'Hello' };
this.dataService.setData(data);
}
}
import { Component, OnInit } from '@angular/core';
import { DataService } from 'path/to/data.service';
@Component({
selector: 'app-receiver',
template: `
{{ receivedData | json }}
`
})
export class ReceiverComponent implements OnInit {
receivedData: any;
constructor(private dataService: DataService) {}
ngOnInit() {
this.dataService.data$.subscribe(data => {
this.receivedData = data;
});
}
}
这样,当发送数据的组件调用sendData方法时,接收数据的组件会实时接收到数据并更新界面。
请注意,如果希望接收组件在初始化时立即接收到数据,可以使用BehaviorSubject而不是Subject来创建dataSubject。