在RxJS和Angular中无限滚动显示新事件

假设有一个电子邮件收件箱。最近的50封电子邮件在初始页面加载时加载

从那时起，任何新收到的电子邮件都应该出现在列表的顶部

复杂的因素是用户可以通过向下滚动到页面底部来分页。这将把下一页数据加载到列表的底部

我想知道如何使用Angular和RxJS实现这一点。起初，我希望有一个

主题

，我可以调用

next（email）

将其推送到流中，但是这实际上不起作用，因为我们需要附加和预结束

另一个复杂的因素是，新的电子邮件应该是动画（即淡入）

我计划将其呈现如下：

<email *ngFor="let email of (emails$ | async)">...</email>

。。。

相反，我正在考虑将其更改为以下内容：

<div class="new-emails" *ngFor="let email of (newEmails$ | async)">...</div>
<div class="initial-emails" *ngFor="let email of (initialEmails$ | async)">...</div>
<div class="older-emails" *ngFor="let email of (oldEmails$ | async)"></div>

。。。
...

---

这是这个问题的标准解决方案，还是我可能缺少一些RXJ来简化这个问题？

您好，在这种情况下，我可能会使用像thie这样的递归策略，演示使用的是Subject

下面是一个具有递归项结构的snipet，后面是数据提要的模拟请求服务

总的来说，每当我的服务中的

主题更新为
时，我都会调用相同的项目。下一步（）
，棘手的部分是你必须在主题订阅上使用
管道（first（））
，否则订阅将不会被取消，即使您将取消订阅逻辑放入
onDestroy
（on destroy不是调用，因为实际上您只是越来越多地潜入递归而没有分离任何组件），这也会破坏可视化逻辑


//类型脚本
从“@angular/core”导入{Component，Input}”；
从“/./services/infinity scroll feed.service”导入{InfinityScrollFeedService}；
从“rxjs/operators”导入{first}；
@组成部分({
选择器：“应用程序递归”，
templateUrl:“./recursive.component.html”，
样式URL:[“/recursive.component.css”]
})
导出类递归组件{
@输入数据；
@输入（）页；
nextLayer=[]；
构造函数（私有提要：InfinityScrollFeedService）{}
恩戈尼尼特（）{
this.feed.httpCallMocker.pipe（first（））.subscribe（数据=>{
this.nextLayer=数据；
});
}
loadMore（）{
this.feed.retrievePackage（编号（本页）+1）；
}
}
//模板
名称：{{row.Name}
年龄：{row.Age}
显示更多
//Css
.行{
显示器：flex；
证明内容：之间的空间；
边框：1px纯红；
}
我认为最好不要绑定订阅本身，而是在类中创建一个包含所有电子邮件的数组，并使用两个getter—一个用于获取新电子邮件，另一个用于其他电子邮件（通过过滤单个数组）。此外，您不需要2个div来处理初始和较旧的电子邮件。。两者都使用单div。这是我的意见