Question

我接受了Web开发正在发生变化的事实，我需要掌握RxJS。我目前正在使用Angular 2.0.0-beta.15开发一个Web应用程序。

我关注的是最优秀的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论坛的出色支持，我无法掌握的是UI显示推送到_resourceTags Subject的所有标签的原因。我想象这个流就像一个橡皮管：一旦一个元素被推入Subject并发布到任何Observer（在这种情况下，UI元素），它是否会蒸发掉消失？它是否留在流/管道/ Subject中？ UI元素如何订阅Subject？我是以错误的方式思考它的吗？我是否需要完整的心理重组/移植？

这么多问题！

Answer 1

传递给next的数据就像一个事件。订阅者获取值，Observable创建的Subject不会保留对它的任何引用（除非您使用特殊运算符来缓冲或通过其他方式保持发出的值。< / p>

使用| async Angular订阅Observable（Subject），当它收到值时会显示它。

*ngFor仅渲染数组。如果要使用*ngFor和Subject，主题需要发出数组 - 每个事件不是单个值，而是一个值数组，这些值由*ngFor呈现并由其他值替换Observable发出新数组时的值。

scan operator

您的代码示例使用scan运算符来累积发出的值并转发一个数组，该数组包含每次收到*ngFor所需的新事件时到目前为止发出的所有值。

Answer 2

我认为observable只在会话被清除之前将变量的值存储在浏览器内存中，就像你设置一个变量来从输入框中获取值一样，并且在浏览器上点击刷新后，值被清空。在上面的场景中，我会像大多数SPA一样认为浏览器无法进行刷新/重新加载的默认行为，并且当你执行类似

的操作时会得到某种持久性

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

值会继续堆积，因为它们由创建事件进行了汇总，但在页面上发生手动刷新并清除会话时会消失

修改

也许我的问题不对，但我的意思是： _resourceTags开始为空，创建事件创建一个值，现在 _resourceTags 是 [newValue＃1] angular在新的创建事件 _resourceTags 现在 [newValue＃1，newValue＃2] <之后，检测更改并使用ngFor重新呈现_resourceTags / strong>角度渲染现在显示。如果流没有被持久化到像firebase这样的在线数据库或者像websql这样的离线数据库，则意味着重新加载浏览器时 _resourceTags 将重新变为空白

RxJS主题和Angular 2组件

2 个答案: