如何在页面重新加载时保留行为主题数据

Question

我有一个渲染房地产的组件 (properties.component.html)。当用户点击特定属性时，我将行为主题设置为等于此属性。

private property = new BehaviorSubject<Property>();

setProperty(property) {
  this.property.next(property);
}

组件 (property.component.html) 使用从行为主题的服务中的可观察对象返回的数据呈现得很好。

this.propertyService.getProperty()
  .subscribe((property) => {
     this.currentProperty = property;
  })

我的问题：当页面重新加载时，行为主题现在 'empty?' 没有数据，因为 .next(属性) 在 properties.component.html 中被点击调用。

应用程序如何保存页面 refresh/reload 上的数据？

另一位发帖人提到将属性作为字符串化 JSON 存储在 localStorage 中。如果这是解决方案，那么用户如何通过直接访问 https://www.myapp.com/property/1234?

来访问这个特定的属性

Answer 1

这不是最优雅的解决方案，但您可以这样做：

@Injectable()
export class PropertyService {

    private property = new ReplaySubject<Property>(1);

    constructor() {
        let storedProp = localStorage.get('storedProp');
        if (storedProp)
            this.setProperty(JSON.parse(storedProp), false);
    }

    setProperty(property: Property, storeProp: boolean = false) {
        if (storeProp)
            localStorage.set('storedProp', JSON.stringify(property));
        this.property.next(property);
    }

    getProperty() {
        return this.property;
    }
}

订阅者在通过getProperty().subscribe()订阅property时，会得到值。

Answer 2

就像其他人提到的那样，您可以使用 localStorage 来解决这个问题。我通过使用 route.

的 queryParams 属性做了类似的事情

import { ActivatedRoute } from '@angular/router'

routeSubscription!: Subscription
paramData: number    //since desired property in url is a number (1234)`

constructor(private route: ActivatedRoute)
{ 
    this.routeSubscription = this.route.queryParams.subscribe(params => {
        this.paramData = params.data    //params.data holds value 1234
});

}`

将参数存储在变量中后，我调用了一个以 paramData 作为参数的函数，以从 post（或获取）httpClient

加载适当的数据

如何在页面重新加载时保留行为主题数据

How to keep behavior subject data on page reload

angular

rxjs

angular2-services

behaviorsubject