我想使用 RxJS（版本 6）实现加载指示。在异步数据调用完成之前，加载指示器（微调器）将显示在组件中。我有一些规则要执行（这些规则是否正确可能是另一个问题，也许可以发表评论）：
我正在一个 Angular 项目中实现它，但我相信，这不是特定于 Angular 的。
我找到了这个拼图的一些碎片，但我需要帮助将它们组装在一起。
在这个 SO answer 中有一个操作符的实现，它延迟了加载指示器的显示。
本文描述了一个很好但不完整的 Angular 实现。
在这篇 Medium 文章中描述了在最短的时间内显示加载指示器。
我遇到了 subscribe 触发 2 次的场景。但是，如果我通过将轮询器方法复制粘贴到我的组件中来摆脱该服务，那么问题就会消失。
我正在 Ionic 3 中运行，但我认为这在这里并不重要。“rxjs”：“5.4.3”
unsubscribe()被召唤ngDestroy()
我的服务.service.ts
public pollingDataReceived = new Subject<any>();
pollForData = (id: string) : Subscription => {
let stopPollingForStatus = false;
return Observable.interval(environment['pollingInterval'])
.takeWhile(() => !stopPollingForStatus)
.concatMap(() => {
return this.getAnalysisById(id);
})
.subscribe((analysisData) => {
if (analysisData) {
if (analysisData.status === 'questions') {
stopPollingForStatus = false;
}
else {
stopPollingForStatus = true;
const result = {
someData: 'whatever'
};
console.log('raise pollingDataReceived event');// This happens ONCE
this.pollingDataReceived.next(result);
}
}
else {
alert('no …我正在开发一个开源 JS 框架，我想将 JSX 与 typescript 一起用于它的组件。但是我对 JSX 的类型定义有疑问
TS 预计：
<Header title="Hello World" />
成为（对于任何类似反应的框架）：
function Header(props: { title: string }) : JSXElement
而在这个框架中，实际类型是基于 Observables ( RxJS )：
function Header(props: Observable<{ title: string }>) : JSXElement | Observable<JSXElement>
例如一个简单的h1标题组件：
function Header(props$) { // take in a stream of updates
return props$.pipe( // return a stream of JSX updates
map(props => <h1>{ props.title }</h1>)
);
}
因此，组件接收一个 Observable 属性并返回一个静态 JSX 元素或一个 JSX 元素流。
UPD 澄清：该框架已经按照我的描述工作，类型是问题所在。Observables 在引擎运行时 …
我正在尝试学习 rxjs 和一般的 Observable 概念，并且有一个场景，我有一类<Room>{}where<Player>{}可以加入多对多关系风格。
在 Firestore 中，我收集了rooms每个房间都有一个名为playersuser 数组的属性uid。
创建房间组件时，我订阅_roomService.getPlayersInRoom(roomId)如下所示：
getPlayersInRoom(roomId: string) {
return this._db.doc<Room>(`rooms/${roomId}`).valueChanges().pipe(
map(room => room.players),
switchMap(players => players),//2
switchMap(playerId => {
if(playerId) {
return this._db.doc<Player>(`users/${playerId}`).valueChanges();
}
})
);
}
我稍后订阅它
.subscribe(player => {
if (player) {
this.players = new Array();
this.players.push(player);
}
这里有几个问题。我的 observable 没有按预期返回玩家数组（请参见将 string[] 转换为字符串的 //2 行）
另一个问题是，this.players每次房间发生变化时，我都会更新组件中的数组（否则.push()会推入重复项。
我已经阅读了关于其中一些运算符的文档，我对它们有所了解，但不足以弄清楚为什么这段代码没有按照应有的方式运行。