使用Angular Observable订阅会话存储密钥

收藏

试图实现我希望的目标是一个简单的“查看会话存储中的键,并在更改时对其进行更新”的方案,但是Observables确实使我失望。

    message$ = new Observable(observer => {
    observer.next(window.sessionStorage.getItem('message'));
  });

  ngOnInit() {
    this.message$.subscribe();
  }

message $绑定到HTML,非常简单:

<p id="message">{{message$ | async}}</p>

如果'message'中已经存储了值,但是如果init上没有消息,然后将其添加,或者消息值确实存在并被更新,则观察不到的对象会将文本输出到HTML。我显然做错了事,并且我很感激某人对Observables有深入的了解。 //为清楚起见进行了编辑

回复
  • nsit 回复

    由于您使用的是异步管道,因此无需订阅组件,可以将其删除。 AsyncPipe将在后台处理订阅/取消订阅。

    尝试改用主题。

    // This is what will help you broadcast your message and push updates to subscribers.
    message$ = new Subject();
    
    // Anytime the "message" changes, you'll want to call this.
    updateTheSubject() {
        this.message$.next(window.sessionStorage.getItem('message'));
    }
    

    您的html模板可以保持不变。

    https://rxjs-dev.firebaseapp.com/guide/subject

    https://angular.io/api/common/AsyncPipe