在Angular 8中,页面切换后服务无法保存数据的问题可能是由于服务的生命周期与页面的生命周期不同步导致的。解决这个问题的一种方法是使用Angular的BehaviorSubject
来保存数据,并在页面切换后重新订阅这个BehaviorSubject
来恢复数据。
首先,在你的服务中创建一个BehaviorSubject
,用于保存数据。例如,假设你的服务名为DataService
:
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
private dataSubject = new BehaviorSubject(null);
public data$ = this.dataSubject.asObservable();
constructor() { }
setData(data: any) {
this.dataSubject.next(data);
}
}
然后,在你的组件中,订阅这个BehaviorSubject
来获取数据,并在页面切换后重新订阅:
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { DataService } from 'path/to/data.service';
@Component({
selector: 'app-my-component',
template: `
{{ data }}
`
})
export class MyComponent implements OnInit, OnDestroy {
data: any;
private dataSubscription: Subscription;
constructor(private dataService: DataService) { }
ngOnInit() {
this.dataSubscription = this.dataService.data$.subscribe(data => {
this.data = data;
});
}
ngOnDestroy() {
this.dataSubscription.unsubscribe();
}
}
在上面的示例中,MyComponent
组件通过订阅DataService
中的data$
属性来获取数据,并在ngOnInit()
中初始化订阅,在ngOnDestroy()
中取消订阅。
当需要保存数据时,你可以调用setData()
方法来更新DataService
中的数据:
import { Component } from '@angular/core';
import { DataService } from 'path/to/data.service';
@Component({
selector: 'app-another-component',
template: `
`
})
export class AnotherComponent {
constructor(private dataService: DataService) { }
saveData() {
const data = { name: 'John Doe' };
this.dataService.setData(data);
}
}
这样,无论页面如何切换,你都可以在任何组件中订阅DataService
中的数据并获得最新的值。