diff --git a/components/affix/affix.component.ts b/components/affix/affix.component.ts index 8e7d15a1ae4..25865886ecf 100644 --- a/components/affix/affix.component.ts +++ b/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)); } diff --git a/components/table/src/table/table-inner-scroll.component.ts b/components/table/src/table/table-inner-scroll.component.ts index 450af0a1ac6..96621afa12a 100644 --- a/components/table/src/table/table-inner-scroll.component.ts +++ b/components/table/src/table/table-inner-scroll.component.ts @@ -193,24 +193,22 @@ export class NzTableInnerScrollComponent implements OnChanges, AfterViewInit ngAfterViewInit(): void { if (this.platform.isBrowser) { - this.ngZone.runOutsideAngular(() => { - const scrollEvent$ = this.scroll$.pipe( - startWith(null), - delay(0), - switchMap(() => - fromEventOutsideAngular(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(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; + } }); } } diff --git a/components/tabs/tab-scroll-list.directive.ts b/components/tabs/tab-scroll-list.directive.ts index 31b452ac120..0e0303a9ee1 100644 --- a/components/tabs/tab-scroll-list.directive.ts +++ b/components/tabs/tab-scroll-list.directive.ts @@ -164,12 +164,14 @@ export class NzTabScrollListDirective implements OnInit { }; 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 + }); }); - }); + } } } diff --git a/components/upload/upload-list.component.ts b/components/upload/upload-list.component.ts index 1047b0aa574..a622f01cb64 100644 --- a/components/upload/upload-list.component.ts +++ b/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 {