refactor(*): unsubscribe with takeUntilDestroyed

packages/abc/avatar-list/avatar-list.component.ts

@@ -7,12 +7,11 @@ import {
   ContentChildren,
   Input,
   OnChanges,
-  OnDestroy,
   Optional,
   QueryList,
   ViewEncapsulation
 } from '@angular/core';
-import { Subject, takeUntil } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 import { InputNumber, NumberInput } from '@delon/util/decorator';
 import type { NgStyleInterface, NzSizeLDSType } from 'ng-zorro-antd/core/types';
@@ -31,13 +30,13 @@ import { AvatarListItemComponent } from './avatar-list-item.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None
 })
-export class AvatarListComponent implements AfterViewInit, OnChanges, OnDestroy {
+export class AvatarListComponent implements AfterViewInit, OnChanges {
   static ngAcceptInputType_maxLength: NumberInput;
 
   private inited = false;
   @ContentChildren(AvatarListItemComponent, { descendants: false })
   private _items!: QueryList<AvatarListItemComponent>;
-  private destroy$ = new Subject<void>();
+  private dir$ = this.directionality.change?.pipe(takeUntilDestroyed());
 
   items: AvatarListItemComponent[] = [];
   exceedCount = 0;
@@ -79,8 +78,9 @@ export class AvatarListComponent implements AfterViewInit, OnChanges, OnDestroy
 
   ngAfterViewInit(): void {
     this.dir = this.directionality.value;
-    this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => {
+    this.dir$.subscribe((direction: Direction) => {
       this.dir = direction;
+      this.cdr.detectChanges();
     });
     this.gen();
     this.inited = true;
@@ -91,9 +91,4 @@ export class AvatarListComponent implements AfterViewInit, OnChanges, OnDestroy
       this.gen();
     }
   }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
 }

packages/abc/error-collect/error-collect.component.ts

@@ -5,15 +5,17 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   ElementRef,
   Inject,
   Input,
-  OnDestroy,
   OnInit,
   Optional,
-  ViewEncapsulation
+  ViewEncapsulation,
+  inject
 } from '@angular/core';
-import { interval, Subject, takeUntil } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { interval } from 'rxjs';
 
 import { AlainConfigService } from '@delon/util/config';
 import { InputNumber } from '@delon/util/decorator';
@@ -36,9 +38,9 @@ import type { NzSafeAny } from 'ng-zorro-antd/core/types';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None
 })
-export class ErrorCollectComponent implements OnInit, OnDestroy {
+export class ErrorCollectComponent implements OnInit {
   private formEl: HTMLFormElement | null = null;
-  private destroy$ = new Subject<void>();
+  private destroy$ = inject(DestroyRef);
 
   _hiden = true;
   count = 0;
@@ -83,11 +85,12 @@ export class ErrorCollectComponent implements OnInit, OnDestroy {
 
   private install(): void {
     this.dir = this.directionality.value;
-    this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => {
+    this.directionality.change?.pipe(takeUntilDestroyed(this.destroy$)).subscribe((direction: Direction) => {
       this.dir = direction;
+      this.cdr.detectChanges();
     });
     interval(this.freq)
-      .pipe(takeUntil(this.destroy$))
+      .pipe(takeUntilDestroyed(this.destroy$))
       .subscribe(() => this.update());
     this.update();
   }
@@ -111,9 +114,4 @@ export class ErrorCollectComponent implements OnInit, OnDestroy {
     if (this.formEl === null) throw new Error('No found form element');
     this.install();
   }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
 }

packages/abc/exception/exception.component.ts

@@ -3,16 +3,17 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   ElementRef,
   Input,
-  OnDestroy,
   OnInit,
   Optional,
   ViewChild,
-  ViewEncapsulation
+  ViewEncapsulation,
+  inject
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DomSanitizer, SafeHtml, SafeUrl } from '@angular/platform-browser';
-import { Subject, takeUntil } from 'rxjs';
 
 import { DelonLocaleService, LocaleData } from '@delon/theme';
 import { isEmpty } from '@delon/util/browser';
@@ -33,10 +34,10 @@ export type ExceptionType = 403 | 404 | 500;
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None
 })
-export class ExceptionComponent implements OnInit, OnDestroy {
+export class ExceptionComponent implements OnInit {
   static ngAcceptInputType_type: ExceptionType | string;
 
-  private destroy$ = new Subject<void>();
+  private destroy$ = inject(DestroyRef);
   @ViewChild('conTpl', { static: true }) private conTpl!: ElementRef;
 
   _type!: ExceptionType;
@@ -113,15 +114,14 @@ export class ExceptionComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.dir = this.directionality.value;
-    this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => {
+    this.directionality.change?.pipe(takeUntilDestroyed(this.destroy$)).subscribe((direction: Direction) => {
       this.dir = direction;
+      this.cdr.detectChanges();
+    });
+    this.i18n.change.pipe(takeUntilDestroyed(this.destroy$)).subscribe(() => {
+      this.locale = this.i18n.getData('exception');
+      this.cdr.detectChanges();
     });
-    this.i18n.change.pipe(takeUntil(this.destroy$)).subscribe(() => (this.locale = this.i18n.getData('exception')));
     this.checkContent();
   }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
 }

packages/abc/exception/exception.spec.ts

@@ -2,6 +2,7 @@ import { Directionality } from '@angular/cdk/bidi';
 import { Component, DebugElement, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { RouterTestingModule } from '@angular/router/testing';
 
 import { createTestContext } from '@delon/testing';
 import { DelonLocaleModule, DelonLocaleService, en_US } from '@delon/theme';
@@ -16,7 +17,7 @@ describe('abc: exception', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [ExceptionModule, DelonLocaleModule],
+      imports: [ExceptionModule, DelonLocaleModule, RouterTestingModule],
       declarations: [TestComponent]
     });
     ({ fixture, dl, context } = createTestContext(TestComponent));

packages/abc/full-content/full-content.component.ts

@@ -4,6 +4,7 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   ElementRef,
   EventEmitter,
   Inject,
@@ -12,10 +13,12 @@ import {
   OnDestroy,
   OnInit,
   Output,
-  ViewEncapsulation
+  ViewEncapsulation,
+  inject
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ActivationEnd, ActivationStart, Event, Router } from '@angular/router';
-import { fromEvent, Subject, debounceTime, filter, takeUntil } from 'rxjs';
+import { fromEvent, debounceTime, filter } from 'rxjs';
 
 import { BooleanInput, InputBoolean, InputNumber, NumberInput } from '@delon/util/decorator';
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
@@ -46,7 +49,7 @@ export class FullContentComponent implements AfterViewInit, OnInit, OnChanges, O
   private bodyEl!: HTMLElement;
   private inited = false;
   private id = `_full-content-${Math.random().toString(36).substring(2)}`;
-  private destroy$ = new Subject<void>();
+  private destroy$ = inject(DestroyRef);
 
   _height = 0;
 
@@ -104,21 +107,21 @@ export class FullContentComponent implements AfterViewInit, OnInit, OnChanges, O
 
     // when window resize
     fromEvent(window, 'resize')
-      .pipe(takeUntil(this.destroy$), debounceTime(200))
+      .pipe(takeUntilDestroyed(this.destroy$), debounceTime(200))
       .subscribe(() => this.updateHeight());
 
     // when servier changed
     this.srv.change
       .pipe(
-        takeUntil(this.destroy$),
+        takeUntilDestroyed(this.destroy$),
         filter(res => res !== null)
       )
       .subscribe(() => this.toggle());
 
     // when router changed
     this.router.events
       .pipe(
-        takeUntil(this.destroy$),
+        takeUntilDestroyed(this.destroy$),
         filter((e: Event) => e instanceof ActivationStart || e instanceof ActivationEnd),
         debounceTime(200)
       )
@@ -148,8 +151,5 @@ export class FullContentComponent implements AfterViewInit, OnInit, OnChanges, O
 
   ngOnDestroy(): void {
     this.removeInBody();
-    const { destroy$ } = this;
-    destroy$.next();
-    destroy$.complete();
   }
 }

packages/abc/global-footer/global-footer.component.ts

@@ -1,19 +1,19 @@
 import { Direction, Directionality } from '@angular/cdk/bidi';
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ContentChildren,
   Inject,
   Input,
-  OnDestroy,
   OnInit,
   Optional,
   QueryList,
   ViewEncapsulation
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Router } from '@angular/router';
-import { takeUntil, Subject } from 'rxjs';
 
 import { WINDOW } from '@delon/util/token';
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
@@ -33,8 +33,8 @@ import { GlobalFooterLink } from './global-footer.types';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None
 })
-export class GlobalFooterComponent implements OnInit, OnDestroy {
-  private destroy$ = new Subject<void>();
+export class GlobalFooterComponent implements OnInit {
+  private dir$ = this.directionality.change?.pipe(takeUntilDestroyed());
   private _links: GlobalFooterLink[] = [];
 
   dir: Direction = 'ltr';
@@ -54,7 +54,8 @@ export class GlobalFooterComponent implements OnInit, OnDestroy {
     private router: Router,
     @Inject(WINDOW) private win: NzSafeAny,
     private dom: DomSanitizer,
-    @Optional() private directionality: Directionality
+    @Optional() private directionality: Directionality,
+    private cdr: ChangeDetectorRef
   ) {}
 
   to(item: GlobalFooterLink | GlobalFooterItemComponent): void {
@@ -74,13 +75,9 @@ export class GlobalFooterComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.dir = this.directionality.value;
-    this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => {
+    this.dir$.subscribe((direction: Direction) => {
       this.dir = direction;
+      this.cdr.detectChanges();
     });
   }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
 }

packages/abc/media/media.component.ts

@@ -3,6 +3,7 @@ import {
   AfterViewInit,
   ChangeDetectionStrategy,
   Component,
+  DestroyRef,
   ElementRef,
   EventEmitter,
   Input,
@@ -12,9 +13,11 @@ import {
   Output,
   Renderer2,
   SimpleChange,
-  ViewEncapsulation
+  ViewEncapsulation,
+  inject
 } from '@angular/core';
-import { Subject, timer, takeUntil, take } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { timer, take } from 'rxjs';
 
 import type Plyr from 'plyr';
 
@@ -41,7 +44,7 @@ export class MediaComponent implements OnChanges, AfterViewInit, OnDestroy {
 
   private _p?: Plyr | null;
   private videoEl?: HTMLElement;
-  private destroy$ = new Subject<void>();
+  private destroy$ = inject(DestroyRef);
 
   @Input() type: MediaType = 'video';
   @Input() source?: string | Plyr.SourceInfo;
@@ -64,7 +67,7 @@ export class MediaComponent implements OnChanges, AfterViewInit, OnDestroy {
   @ZoneOutside()
   private initDelay(): void {
     timer(this.delay)
-      .pipe(takeUntil(this.destroy$))
+      .pipe(takeUntilDestroyed(this.destroy$))
       .subscribe(() => this.ngZone.runOutsideAngular(() => this.init()));
   }
 
@@ -119,7 +122,7 @@ export class MediaComponent implements OnChanges, AfterViewInit, OnDestroy {
     }
     this.srv
       .notify()
-      .pipe(takeUntil(this.destroy$), take(1))
+      .pipe(takeUntilDestroyed(this.destroy$), take(1))
       .subscribe(() => this.initDelay());
 
     this.srv.load();
@@ -135,9 +138,5 @@ export class MediaComponent implements OnChanges, AfterViewInit, OnDestroy {
   ngOnDestroy(): void {
     this.destroy();
     this._p = null;
-
-    const { destroy$ } = this;
-    destroy$.next();
-    destroy$.complete();
   }
 }