2016-04-22 78 views
4

我接受的事实是,网络开发正在发生变化,我需要与RxJS紧密合作。我目前正在使用Angular 2.0.0-beta.15开发一个Web应用程序。RxJS主题和Angular2组件

我跟随最优秀的ng-book 2(这种广告是否允许?哦)。它涵盖了RxJS中的一些重要概念,并提供了进一步阅读的链接。我已经阅读并理解了源代码和相关的解释,但是我们在关于Subject的某些细节,以及Angular 2组件如何使用这些主题流方面留下了一些细节。

我已增加从书正是如此代码:

export class SubmitResourceComponent { 
    private _newResourceTags: Subject<Tag> = new Subject<Tag>(); 
    private _resourceTags: Observable<Tag[]>; 
    private _tagUpdates: Subject<any> = new Subject<any>(); 
    private _create: Subject<Tag> = new Subject<Tag>(); 
    private _remove: Subject<Tag> = new Subject<Tag>(); 

    constructor() { 
     this._resourceTags = this._tagUpdates 
      .scan((tags: Tag[], operation: ITagsOperation) => operation(tags), initialTags); 

     this._create 
      .map((tag: Tag): ITagsOperation => (tags: Tag[]) => _.uniq(tags.concat(tag))) 
      .subscribe(this._tagUpdates); 

     this._remove 
      .map((tag: Tag): ITagsOperation => (tags: Tag[]) => _.without(tags, tag)) 
      .subscribe(this._tagUpdates); 

     this._newResourceTags.subscribe(this._create); 
    } 

    get resourceTags(): Observable<Tag[]> { 
     return this._resourceTags; 
    } 

    protected addTagToResource(tag: Tag): void { 
     this._create.next(tag); 
    } 

    protected removeTagFromResource(tag: Tag): void { 
     this._remove.next(tag); 
    } 
} 

而且我消费_resourceTags这样的:

<button class="btn" *ngFor="#tag of resourceTags | async" (click)="removeTagFromResource(tag)">{{ tag.name }}</button> 

我无法把握,甚至从出色的支持gitter论坛,这就是为什么用户界面显示所有推入_resourceTagsSubject的标签。我会想象这个流就像一个橡皮管:一旦一个元素被推入Subject并发布到任何Observer(在这种情况下,UI元素),它会不会蒸发并消失?它留在流/管/ Subject?界面元素如何订阅Subject?我是否以错误的方式思考它?我需要完整的心理重组/移植吗?

这么多问题!

回答

6

传递给next的数据就像一个事件。该订户得到的价值和由Subject创建不持有任何提及它(除非你使用特殊的运营商,目的是缓冲或通过其他方式保持发出值Observable

随着| async角订到Observable 。(Subject),并且当它接收到一个值则显示它

*ngFor只呈现阵列如果要使用*ngForSubject,受试者需要发射阵列 - 每个事件是不是一个单一的值,但值的阵列和这些值由*ngFor呈现,并由Observable发出一个新的数组。

scan operator

你的代码示例使用scan操作员的目的来积累发射值和转发包含的所有值到目前为止每次发射接收等所需通过*ngFor新事件的阵列。

+0

由于该使用RxJS 5,你应该链接到RxJS 5 docs for ['scan'](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-scan)。 – Dorus

+0

好的,完成了。感谢提示。 –

+0

“With | async Angular订阅了Observable(Subject),当它收到一个值时,它显示它。” - 我假设每次“收藏”被改变时,所有的标签都会被推送到Angular组件,通过添加或移除标签,是吗?它必须做,否则你不能删除一个标签,这段代码运行正常。我想我只需要创建大量日志来准确查看副作用发生的时间以及收集的结果。 – serlingpa

1

我认为observables在浏览器内存中存储一​​个变量的值,直到会话被清除,就像如何设置一个变量来从输入框中获取一个值,并且在浏览器上点击刷新值一样清空。在上述情况下,我觉得就像是从刷新/重载的默认行为,防止浏览器最SPA和你得到某种持久的,所以当你做一个操作像

... _.uniq(tags.concat(tag))).subscribe(this._tagUpdates);... 

值继续堆积,因为它们“再由创建事件concated但在页面上手动刷新时就会消失,并清除

编辑

也许我的问题错了,但我的意思是这个会话: _resourceTags开始空,创造价值d由创建事件,现在_resourceTags[NEWVALUE#1]角检测改变并使用ngFor,重新渲染_resourceTags后一个新创建事件_resourceTags现在是[NEWVALUE#1, newValue#2]现在显示两者的角度重置。如果流不被保存到像火力或脱机一个类似的WebSQL这将意味着在重新加载浏览器_resourceTags将重新变回空的在线数据库

+0

不知何故,这个答案似乎并没有涉及到这个问题。 –

+0

哦,对不起,我以为你想知道值是如何可能不消失 –