refactor: replace with fromEventOutsideAngular in other places

components/affix/affix.component.ts

@@ -16,7 +16,6 @@ import {
   EventEmitter,
   inject,
   Input,
-  NgZone,
   OnChanges,
   OnInit,
   Output,
@@ -26,14 +25,19 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { fromEvent, merge, ReplaySubject, Subscription } from 'rxjs';
+import { merge, ReplaySubject, Subscription } from 'rxjs';
 import { map, throttleTime } from 'rxjs/operators';
 
 import { NzResizeObserver } from 'ng-zorro-antd/cdk/resize-observer';
 import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
 import { NzScrollService } from 'ng-zorro-antd/core/services';
 import { NgStyleInterface } from 'ng-zorro-antd/core/types';
-import { getStyleAsText, numberAttributeWithZeroFallback, shallowEqual } from 'ng-zorro-antd/core/util';
+import {
+  fromEventOutsideAngular,
+  getStyleAsText,
+  numberAttributeWithZeroFallback,
+  shallowEqual
+} from 'ng-zorro-antd/core/util';
 
 import { AffixRespondEvents } from './respond-events';
 import { getTargetRect, SimpleRect } from './utils';
@@ -57,7 +61,6 @@ const NZ_AFFIX_DEFAULT_SCROLL_TIME = 20;
 export class NzAffixComponent implements AfterViewInit, OnChanges, OnInit {
   public nzConfigService = inject(NzConfigService);
   private scrollSrv = inject(NzScrollService);
-  private ngZone = inject(NgZone);
   private platform = inject(Platform);
   private renderer = inject(Renderer2);
   private nzResizeObserver = inject(NzResizeObserver);
@@ -136,18 +139,16 @@ export class NzAffixComponent implements AfterViewInit, OnChanges, OnInit {
 
     this.removeListeners();
     const el = this.target === window ? this.document.body : (this.target as Element);
-    this.positionChangeSubscription = this.ngZone.runOutsideAngular(() =>
-      merge(
-        ...Object.keys(AffixRespondEvents).map(evName => fromEvent(this.target, evName)),
-        this.offsetChanged$.pipe(map(() => ({}))),
-        this.nzResizeObserver.observe(el)
+    this.positionChangeSubscription = merge(
+      ...Object.keys(AffixRespondEvents).map(evName => fromEventOutsideAngular(this.target, evName)),
+      this.offsetChanged$.pipe(map(() => ({}))),
+      this.nzResizeObserver.observe(el)
+    )
+      .pipe(
+        throttleTime(NZ_AFFIX_DEFAULT_SCROLL_TIME, undefined, { trailing: true }),
+        takeUntilDestroyed(this.destroyRef)
       )
-        .pipe(
-          throttleTime(NZ_AFFIX_DEFAULT_SCROLL_TIME, undefined, { trailing: true }),
-          takeUntilDestroyed(this.destroyRef)
-        )
-        .subscribe(e => this.updatePosition(e as Event))
-    );
+      .subscribe(e => this.updatePosition(e as Event));
     this.timeout = setTimeout(() => this.updatePosition({} as Event));
   }
 

components/table/src/table/table-inner-scroll.component.ts

@@ -193,24 +193,22 @@ export class NzTableInnerScrollComponent<T> implements OnChanges, AfterViewInit
 
   ngAfterViewInit(): void {
     if (this.platform.isBrowser) {
-      this.ngZone.runOutsideAngular(() => {
-        const scrollEvent$ = this.scroll$.pipe(
-          startWith(null),
-          delay(0),
-          switchMap(() =>
-            fromEventOutsideAngular<MouseEvent>(this.tableBodyElement.nativeElement, 'scroll').pipe(startWith(true))
-          )
-        );
-        const resize$ = this.resizeService.connect();
-        merge(scrollEvent$, resize$, this.data$, this.scroll$)
-          .pipe(startWith(true), delay(0), takeUntilDestroyed(this.destroyRef))
-          .subscribe(() => this.setScrollPositionClassName());
-        scrollEvent$.pipe(filter(() => !!this.scrollY)).subscribe(() => {
-          this.tableHeaderElement.nativeElement.scrollLeft = this.tableBodyElement.nativeElement.scrollLeft;
-          if (this.tableFootElement) {
-            this.tableFootElement.nativeElement.scrollLeft = this.tableBodyElement.nativeElement.scrollLeft;
-          }
-        });
+      const scrollEvent$ = this.scroll$.pipe(
+        startWith(null),
+        delay(0),
+        switchMap(() =>
+          fromEventOutsideAngular<MouseEvent>(this.tableBodyElement.nativeElement, 'scroll').pipe(startWith(true))
+        )
+      );
+      const resize$ = this.resizeService.connect();
+      merge(scrollEvent$, resize$, this.data$, this.scroll$)
+        .pipe(startWith(true), delay(0), takeUntilDestroyed(this.destroyRef))
+        .subscribe(() => this.setScrollPositionClassName());
+      scrollEvent$.pipe(filter(() => !!this.scrollY)).subscribe(() => {
+        this.tableHeaderElement.nativeElement.scrollLeft = this.tableBodyElement.nativeElement.scrollLeft;
+        if (this.tableFootElement) {
+          this.tableFootElement.nativeElement.scrollLeft = this.tableBodyElement.nativeElement.scrollLeft;
+        }
       });
     }
   }

components/tabs/tab-scroll-list.directive.ts

@@ -164,12 +164,14 @@
   };
 
   onOffset(x: number, y: number, event: Event): void {
-    this.ngZone.run(() => {
-      this.offsetChange.emit({
-        x,
-        y,
-        event
+    if (this.offsetChange.observers.length) {
+      this.ngZone.run(() => {
+        this.offsetChange.emit({
+          x,
+          y,
+          event
+        });
       });
-    });
+    }
   }
 }

components/upload/upload-list.component.ts

@@ -20,11 +20,12 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { fromEvent, Observable, of } from 'rxjs';
+import { Observable, of } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
+import { fromEventOutsideAngular } from 'ng-zorro-antd/core/util';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzProgressModule } from 'ng-zorro-antd/progress';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
@@ -156,7 +157,7 @@ export class NzUploadListComponent implements OnChanges {
     const img = new Image();
     const objectUrl = URL.createObjectURL(file);
     img.src = objectUrl;
-    return fromEvent(img, 'load').pipe(
+    return fromEventOutsideAngular(img, 'load').pipe(
       map(() => {
         const { width, height } = img;
 
@@ -252,7 +253,6 @@ export class NzUploadListComponent implements OnChanges {
     if (this.onRemove) {
       this.onRemove(file);
     }
-    return;
   }
 
   handleDownload(file: NzUploadFile): void {