wardbell / subsink

RxJS subscription sink for unsubscribing gracefully in a component

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Feature Request: Expose array instance

wSedlacek opened this issue · comments

So recently I have been attempting to find a simple pattern for unsubscribing. I really am enjoying SubSink however I still need to do a whole ngOnDestory() when using it.

I have looked into a few other libraries and the one I have come across that I have found with the best patterns for removing ngOnDestory() has been the @ngneat/until-destroy library. However it's patterns for tracking observables is a bit cumbersome.

So I had the idea of using subsink with @ngneat/until-destroy. @ngneat/until-destroy offers the option to provide the name of a Subscription array member and it will unsubscribe when the component is destroyed. However SubSink stores it's array internally so I thought instead we could do something like this -

class SubSink extends Array<SubscriptionLike>

Given that SubSink has no methods that overlap with an Array this change can be non breaking and allow for this pattern.

@UntilDestroy({ arrayName: "subs" })
@Directive({
  selector: "[appGrid]"
})
export class GridDirective implements AfterContentInit {
  @ContentChildren(GridItemDirective)
  private readonly items: QueryList<GridItemDirective>;

  private readonly subs = new SubSink();
  private flipping = new Flipping();

  public notifyChange() {
    this.flipping.read();
  }

  public ngAfterContentInit() {
    this.subs.sink = this.items.changes.subscribe(() => {
      this.flipping.flip();
    });
  }
}

As it stands right now if I wanted to use this pattern with SubSink I would need to provide UntilDestory with the private reference to subs._subs which I feel is somewhat of an Anti-pattern.

What are your thoughts @wardbell?