要实现Angular Routing和RxJs订阅共享,可以使用共享服务。
首先,创建一个共享服务,用来保存需要共享的订阅对象。在该服务中,定义一个BehaviorSubject对象,用来保存最新的订阅值。
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class SharedService {
private sharedData = new BehaviorSubject(null);
setSharedData(data: any) {
this.sharedData.next(data);
}
getSharedData() {
return this.sharedData.asObservable();
}
}
然后,在需要共享订阅的组件中,注入该共享服务,并在需要共享订阅的地方订阅该服务中的共享对象。
import { Component, OnInit } from '@angular/core';
import { SharedService } from './shared.service';
@Component({
selector: 'app-component1',
template: `
Component 1
`
})
export class Component1 implements OnInit {
constructor(private sharedService: SharedService) { }
ngOnInit() {
this.sharedService.getSharedData().subscribe(data => {
// 处理共享数据的更新
console.log('Shared Data:', data);
});
}
updateSharedData() {
this.sharedService.setSharedData('New Data');
}
}
另一个需要订阅共享数据的组件也可以使用同样的方式来订阅共享服务中的共享对象。
import { Component, OnInit } from '@angular/core';
import { SharedService } from './shared.service';
@Component({
selector: 'app-component2',
template: `
Component 2
`
})
export class Component2 implements OnInit {
constructor(private sharedService: SharedService) { }
ngOnInit() {
this.sharedService.getSharedData().subscribe(data => {
// 处理共享数据的更新
console.log('Shared Data:', data);
});
}
updateSharedData() {
this.sharedService.setSharedData('New Data');
}
}
这样,无论是在Component1还是Component2中更新共享数据,另一个组件都会收到更新的值。