3

我正在尝试创建一个存储来管理我的数据，然后在我的组件中使用该存储。应用程序是用 Ionic2 和 Angular2 构建的。

更新

这是我如何建模数据存储的链接https://coryrylan.com/blog/angular-2-observable-data-services

我遇到的麻烦是更新可观察对象中的对象。

这里是商店

export class MessageService {
    messages$: Observable<Message[]>;
    update() {
        //...code to make http call and set `this.messages$`
    }
    setMessageFlag(msg: Message) {
        //post to server, nothing more, nothing returned
    }
}

现在我的组件注入了这个服务

export class Inbox OnInit {
    messages$: Observable<Messages[]>

    constructor(private $messageService: MessageService) {
        this.messages$ = this.$messageService.messages$;
    }

    flagMessage(msg: Message) {
        msg.isNew = !msg.isNew;
        this.$messageService.setMessageFlag(msg); //makes a http call to set the message flag
    }

    ngOnInit() {
        this.$messageService.update();
    }
}

async然后我的模板使用管道消耗 observable

<div *ngFor="let message of messages$ | async">
    <h2 [ngClass]="{'is-read': message.isNew}">{{message.title}}</h2>
    <button (click)="flag(message)">{{message.isNew ? 'Mark as read' : 'Mark as unread'}}</button>
</div>

现在对于我感到困惑的部分。

flagMessage(msg: Message) {
    msg.isNew = !msg.isNew;
    this.$messageService.setMessageFlag(msg);
}

单击按钮并flagMessage(message)调用方法时，它会设置msg.isNew, 并对服务器进行 http 调用。我看到is-new该类应用于<h2>，但随后它很快恢复为原始值。

我不想再次调用从服务器获取所有消息。这似乎效率低下。我在想 Observable 正在返回一个副本，但我不确定。

最近对我来说这是一个学习曲线。我已经在上个月开始使用 Angular2、Typescript2、Rxjs 和 Ionic2，因此感谢您的帮助。

4

1 回答 1

0

我认为这种情况的理想选择是ReplaySubject可以记住最后发出的值，并将其重新发送给在第一次发出值后订阅的所有观察者。

import {Observable, ReplaySubject} from 'rxjs';

var results = new ReplaySubject(1);

// Simulate HTTP request
Observable.create(subscriber => {
  console.log('Observable.create');
  var data = 'response data';
  results.next(data);
}).subscribe();

results.subscribe(r => console.log(r));
results.subscribe(r => console.log(r));
results.subscribe(r => console.log(r));

// prints to console:
// Observable.create
// response data
// response data
// response data

查看现场演示： http: //plnkr.co/edit/DOPsPlMxh06g1lWoJllQ

即使三个观察者订阅后"response data"第一次使用results.next(data)它们都收到相同的数据。

据我了解您的用例，您将创建messages$一个实例，ReplaySubject因为那是您订阅观察者的地方。那么调用HTTP请求和调用的逻辑messages$.next(...)就可以完全独立于它了。因此，所有新订阅者都messages$应该收到来自服务器的最后一个响应，我认为这是你想要的（？）。

于 2016-09-27T22:06:48.783 回答