blocks|key|2292755|text|根据您的解释，我可以理解以下内容，如果我的理解不正确，请纠正我-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2292756|您希望收集发出布尔值的各种可观察对象，并希望以这样的方式进行跟踪:如果它们中的任何一个至少有一个可观察对象，则最终的可观察对象应发出"true"，否则最终的可观察对象应返回"false"|offset|length|style|CODE|2292757|尽管您的BehaviorSubject方法是一种反应式方法。我提出了以下方法；让我知道它在您的场景中是否有意义-|2292758|方法1+-|BOLD|2292759|enum+ListAction+{
++Added,
++Removed,
++Empty,
++Undefined
}

export+class+ProgressService+{

++constructor()+{+}

++progress:+Observable<number>+=+EMPTY;+//+value+>+0+when+something+is+loading

++obsListChanged:+BehaviorSubject<ListAction>+=+new+BehaviorSubject<any>(ListAction.Undefined);
++obsList:+Array<Observable<boolean>>+=+[];

++addLoadingProvider(lp:+Observable<boolean>)+{
++++//+increment+this.progress,+when+lp+emits+true
++++//+decrease+this.progress,+when+lp+emits+false
++++//+nice+to+have:+ignore+if+lp's+first+emitted+value+is+false
++++this.obsList.push(lp);

++++this.obsListChanged.next(ListAction.Added);
++}

++removeLoadingProvider(lp:+Observable<boolean>)+{
++++//+stop+listening+to+lp
++++//+clean+up:+decrease+this.progress,+if+lp+last+emitted+true
++++this.obsList+=+this.obsList.filter(i+=>+i+!==+lp);
++++this.obsListChanged.next(ListAction.Removed);
++}

++isLoading():+Observable<boolean>+{
++++//+return+this.progress.pipe(
++++//+++map(val+=>+val+!==+0)
++++//+);
++++return+this.obsListChanged.pipe(
++++++switchMap(()+=>+{
++++++++return+combineLatest(this.obsList);
++++++}),
++++++map(v+=>+{
++++++++return+v.some(loading+=>+loading);
++++++})
++++);
++}
}|code-block|syntax|javascript|2292760|我已经定义了一个rxjs+observable，如果你想根据你的ListAction来做特定的工作，那么你可以按照你的逻辑在ListAction运算符中做同样的事情。|2292761|方法2方法1的一个改进版本-+-|2292762|export+class+ProgressService+{

++constructor()+{+}

++progress:+Observable<number>+=+EMPTY;+//+value+>+0+when+something+is+loading

++obsList$:+BehaviorSubject<Array<Observable<boolean>>>+=+new+BehaviorSubject<Array<Observable<boolean>>>([]);

++addLoadingProvider(lp:+Observable<boolean>)+{
++++//+increment+this.progress,+when+lp+emits+true
++++//+decrease+this.progress,+when+lp+emits+false
++++//+nice+to+have:+ignore+if+lp's+first+emitted+value+is+false
++++this.obsList$.next([...this.obsList$.getValue(),+lp]);
++}

++removeLoadingProvider(lp:+Observable<boolean>)+{
++++//+stop+listening+to+lp
++++//+clean+up:+decrease+this.progress,+if+lp+last+emitted+true
++++const+removed+=+this.obsList$.getValue().filter(i+=>+i+!==+lp);
++++this.obsList$.next(removed);
++}

++isLoading():+Observable<boolean>+{
++++//+return+this.progress.pipe(
++++//+++map(val+=>+val+!==+0)
++++//+);
++++return+this.obsList$.pipe(
++++++switchMap(obs+=>+{
++++++++return+combineLatest(obs);
++++++}),
++++++map(v+=>+{
++++++++return+v.some(loading+=>+loading);
++++++})
++++);
++}
}|2292763|entityMap^0|0|1U|6|2E|7|0|0|0|5|0|0|0|0|G|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@$D|11|E|12|F|G]|$D|13|E|14|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|15|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|16|8|@$D|17|E|18|F|L]]|9|@]|A|$]]|$1|M|3|N|5|O|7|19|8|@]|9|@]|A|$P|Q]]|$1|R|3|S|5|6|7|1A|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1B|8|@$D|1C|E|1D|F|L]]|9|@]|A|$]]|$1|V|3|W|5|O|7|1E|8|@]|9|@]|A|$P|Q]]|$1|X|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|Y|$]]

As per your explaination, I could understand the following [please correct me If my understanding is not correct] - 

You want to collect various observables which emit boolean value and you want to keep track in such a way if any one of them is having at least one <code>"true"</code> then your final observable should emit true otherwise final observable should return <code>"false"</code>

Although your BehaviorSubject approach is a reactive approach. I am proposing the following approach; Let me know if it makes sense in your scenario -

Approach 1 -

<pre><code>enum ListAction {
 Added,
 Removed,
 Empty,
 Undefined
}

export class ProgressService {

 constructor() { }

 progress: Observable&lt;number&gt; = EMPTY; // value &gt; 0 when something is loading

 obsListChanged: BehaviorSubject&lt;ListAction&gt; = new BehaviorSubject&lt;any&gt;(ListAction.Undefined);
 obsList: Array&lt;Observable&lt;boolean&gt;&gt; = [];

 addLoadingProvider(lp: Observable&lt;boolean&gt;) {
 // increment this.progress, when lp emits true
 // decrease this.progress, when lp emits false
 // nice to have: ignore if lp's first emitted value is false
 this.obsList.push(lp);

 this.obsListChanged.next(ListAction.Added);
 }

 removeLoadingProvider(lp: Observable&lt;boolean&gt;) {
 // stop listening to lp
 // clean up: decrease this.progress, if lp last emitted true
 this.obsList = this.obsList.filter(i =&gt; i !== lp);
 this.obsListChanged.next(ListAction.Removed);
 }

 isLoading(): Observable&lt;boolean&gt; {
 // return this.progress.pipe(
 // map(val =&gt; val !== 0)
 // );
 return this.obsListChanged.pipe(
 switchMap(() =&gt; {
 return combineLatest(this.obsList);
 }),
 map(v =&gt; {
 return v.some(loading =&gt; loading);
 })
 );
 }
}
</code></pre>

I have defined a ListAction observable if you want to do specific works as per your ListAction then you can do the same in rxjs operators as per your logic.

Approach 2 [A bit improved version of Approach 1] -

<pre><code>export class ProgressService {

 constructor() { }

 progress: Observable&lt;number&gt; = EMPTY; // value &gt; 0 when something is loading

 obsList$: BehaviorSubject&lt;Array&lt;Observable&lt;boolean&gt;&gt;&gt; = new BehaviorSubject&lt;Array&lt;Observable&lt;boolean&gt;&gt;&gt;([]);

 addLoadingProvider(lp: Observable&lt;boolean&gt;) {
 // increment this.progress, when lp emits true
 // decrease this.progress, when lp emits false
 // nice to have: ignore if lp's first emitted value is false
 this.obsList$.next([...this.obsList$.getValue(), lp]);
 }

 removeLoadingProvider(lp: Observable&lt;boolean&gt;) {
 // stop listening to lp
 // clean up: decrease this.progress, if lp last emitted true
 const removed = this.obsList$.getValue().filter(i =&gt; i !== lp);
 this.obsList$.next(removed);
 }

 isLoading(): Observable&lt;boolean&gt; {
 // return this.progress.pipe(
 // map(val =&gt; val !== 0)
 // );
 return this.obsList$.pipe(
 switchMap(obs =&gt; {
 return combineLatest(obs);
 }),
 map(v =&gt; {
 return v.some(loading =&gt; loading);
 })
 );
 }
}
</code></pre>

I'm trying to build a pluggable <code>ProgressService</code>.

The service should track how many "things" are currently loading. And have an <code>isLoading()</code> method that returns an <code>Observable&lt;boolean&gt;</code> to indicate if anything is loading at all.

My first solution was very naive using a <code>new BehaviorSubject(0)</code> and then each loading provider just called <code>ProgressService.increase()</code> and <code>ProgressService.decrease()</code>. This worked fine. But now I'd like to go more reactive, if possible.

<hr>

Then I came across <code>merge</code>, which works fine when all loading providers are known at the beginning:

<pre class="lang-js prettyprint-override"><code>this.progress = merge(...progressProviders).pipe(
 scan((acc, curr) =&gt; acc + (curr ? 1 : -1), 0)
);
</code></pre>

This will simply increase / decrease the <code>progress</code> value, when any loading provider emits <code>true</code> or <code>false</code>.

But I also need some kind of register / unregister functionality. This should basically add a new <code>Observable</code> to the <code>merge</code> chain (or remove it).

<hr>

The new <code>ProgressService</code> should look like this:

<pre class="lang-js prettyprint-override"><code>class ProgressService {

 progress: Observable&lt;number&gt; = EMPTY; // value &gt; 0 when something is loading

 addLoadingProvider(lp: Observable&lt;boolean&gt;) {
 // increment this.progress, when lp emits true
 // decrease this.progress, when lp emits false
 // nice to have: ignore if lp's first emitted value is false
 }

 removeLoadingProvider(lp: Observable&lt;boolean&gt;) {
 // stop listening to lp
 // clean up: decrease this.progress, if lp last emitted true
 }

 isLoading(): Observable&lt;boolean&gt; {
 return this.progress.pipe(
 map(val =&gt; val !== 0)
 );
 }

}
</code></pre>

Maybe the <code>removeLoadingProvider</code> method isn't needed at all (?), if we return a <code>Subscription</code> from <code>addLoadingProvider</code>, and use <code>Subscription.unsubscribe()</code> to unregister.

Hopefully someone can tell me how to <code>merge</code> and <code>unmerge</code> additional Observables on demand.

RxJS: dynamically add and remove Observable with merge

我正在尝试构建一个可插拔的ProgressService。服务应该跟踪当前正在加载的“内容”的数量。并且有一个isLoading()方法，它返回一个Observable<boolean>来指示是否正在加载任何东西。我的第一个解决方案非常天真，使用一个new BehaviorSubject(0)，然后每个加载提供程序只调...

问RxJS:使用merge动态添加和删除可观察对象
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问RxJS:使用merge动态添加和删除可观察对象EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问RxJS:使用merge动态添加和删除可观察对象
EN