Destroy service for rxjs observables

[Lomanu4]

? Implementation:
Here an on destroy service for being used in rxjs and angular component for unsubscribing observables.


@Injectable()
export class DestroyService extends Subject<void> {
ngOnDestroy() {
this.next();
this.complete();
}
}

? Question:
How Angular calls ngOnDestroy() in this pattern? Even though DestroyService is a service and extends Subject, how does Angular still invoke ngOnDestroy()?

? Answer:
Here's the key idea:

Even though DestroyService extends Subject (which is not a component or directive), Angular still calls its ngOnDestroy() method if the service is provided at the component level.

? Why ngOnDestroy() Gets Called in a Service

Angular will call ngOnDestroy() if:

• The class implements OnDestroy
• AND it is a provider on a component or directive

Example:

@Component({
selector: 'app-foo',
providers: [DestroyService]
})
export class FooComponent {
constructor(private destroy$: DestroyService) {}
}

Then Angular treats the service like a directive-level provider, and because it has ngOnDestroy():
Angular will call that method when the component is destroyed.

? Why It Works Even Though It Extends Subject

• Subject has no ngOnDestroy(). That's fine.
• You're extending Subject and adding ngOnDestroy() yourself.
• Angular doesn’t care that it extends Subject — it just sees:
  • “This class was provided in the component”
  • “It has ngOnDestroy()”
  • Call it when the component is destroyed

? Summary

• DestroyService is a service, but it's scoped to the component using providers: [DestroyService]
• It has a custom ngOnDestroy() method
• Angular calls ngOnDestroy() on component-scoped providers
• So you get an automatic, injectable "destroy notifier" for use with takeUntil()

This is a neat Angular trick that combines:

• Lifecycle hooks
• Dependency injection
• RxJS

into a reusable, composable unsubscribe mechanism.
This is a neat Angular trick that combines:

• Lifecycle hooks
• Dependency injection
• RxJS

into a reusable, composable unsubscribe mechanism.

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.