RxJS主题和Angular 2组件 [英] RxJS Subjects and Angular 2 components
问题描述
我可以接受Web开发正在发生变化的事实，我需要掌握RxJS.我目前正在使用Angular 2.0.0-beta.15开发一个Web应用.
I am coming to terms with the fact that web development is changing and I need to get to grips with RxJS. I am currently developing a web app using Angular 2.0.0-beta.15.
我关注的是最出色的 ng-book 2 (是否允许这种广告? 那好吧).它以粗略的笔触涵盖了RxJS中的一些重要概念，并提供了进一步阅读的链接.我已经阅读并理解了源代码和随附的说明，但是对有关 Subject 的一些细节以及Angular 2组件如何使用这些Subject流的了解还不够.
I am following the most excellent ng-book 2 (is that kind of advertising allowed? Oh well). It covers in broad, shallow strokes some important concepts in RxJS and provides links to further reading. I have read and understood the source code and accompanying explanation, but am left a little in the dark about some details regarding Subjects in particular and how Angular 2 components consume these Subject streams.
我因此增加了本书中的代码:
I have augmented the code from the book thusly:
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元素)，它不会蒸发然后消失吗?它是否停留在流/管道/<代码>主题中?UI元素如何订阅 Subject ?我是否以错误的方式思考?我是否需要完整的心理重组/移植?
What I can't grasp, even with excellent support from the gitter forums, is why the UI displays all of the tags that are pushed into the _resourceTags Subject. I would imagine that the stream is like a rubber pipe: once an element has been pushed into the Subject and published to whatever Observer (in this case, the UI element), does it not then evaporate and disappear? Does it stay in the stream/pipe/Subject? How is the UI element subscribing to the Subject? Am I thinking about it in the wrong way? Do I need a complete mental restructuring/transplant?
这么多问题！
推荐答案
传递给 next 的数据就像一个事件.订阅者获取该值，并且 Subject 创建的 Observable 不保留对该值的任何引用(除非您使用特殊的运算符来缓冲或通过其他方式保留该值)发出的值.
Data passed to next is like an event. The subscriber gets the value and the Observable created by the Subject doesn't hold any reference to it (except you use special operators with the purpose to buffer or by other means keep emitted values.
使用 |异步 Angular订阅 Observable ( Subject )，并在接收到值时显示它.
With | async Angular subscribes to the Observable (Subject) and when it receives a value it displays it.
* ngFor 仅呈现数组.如果要对 Subject 使用 * ngFor ，则主题需要发出数组-每个事件不是单个值，而是一个值数组，并且这些值由 * ngFor ，并在 Observable 发出新数组时替换为其他值.
*ngFor only renders arrays. If you want use *ngFor with Subject, the subject needs to emit arrays - each event is not a single value but an array of values and these values are rendered by *ngFor and replaced by other values when the Observable emits a new array.
您的代码示例使用 scan 运算符来累积发射的值，并在每次接收到新的事件(如 * ngFor所要求的)时转发一个包含到目前为止发射的所有值的数组..
Your code example uses the scan operator with the purpose to accumulate emitted values and forward an array that contains all values emitted so far each time it receives a new event like required by *ngFor.
这篇关于RxJS主题和Angular 2组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
