fix(module:grid,menu,radio,table): fix memory leak problem (#6408)

Co-authored-by: zhangwentingbj <zhangwentingbj@fenbi.com>

components/grid/col.directive.ts

@@ -125,7 +125,7 @@ export class NzColDirective implements OnInit, OnChanges, AfterViewInit, OnDestr
 
   ngOnInit(): void {
     this.dir = this.directionality.value;
-    this.directionality.change.subscribe((direction: Direction) => {
+    this.directionality.change.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => {
       this.dir = direction;
       this.setHostClassMap();
     });

components/menu/submenu.service.ts

@@ -3,16 +3,16 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { Inject, Injectable, Optional, SkipSelf } from '@angular/core';
+import { Inject, Injectable, OnDestroy, Optional, SkipSelf } from '@angular/core';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { BehaviorSubject, combineLatest, merge, Observable, Subject } from 'rxjs';
-import { auditTime, distinctUntilChanged, filter, map, mapTo, mergeMap } from 'rxjs/operators';
+import { auditTime, distinctUntilChanged, filter, map, mapTo, mergeMap, takeUntil } from 'rxjs/operators';
 import { MenuService } from './menu.service';
 import { NzIsMenuInsideDropDownToken } from './menu.token';
 import { NzMenuModeType } from './menu.types';
 
 @Injectable()
-export class NzSubmenuService {
+export class NzSubmenuService implements OnDestroy {
   mode$: Observable<NzMenuModeType> = this.nzMenuService.mode$.pipe(
     map(mode => {
       if (mode === 'inline') {
@@ -31,6 +31,7 @@ export class NzSubmenuService {
   /** submenu title & overlay mouse enter status **/
   private isMouseEnterTitleOrOverlay$ = new Subject<boolean>();
   private childMenuItemClick$ = new Subject<NzSafeAny>();
+  private destroy$ = new Subject<void>();
   /**
    * menu item inside submenu clicked
    * @param menu
@@ -64,7 +65,8 @@ export class NzSubmenuService {
     const isSubMenuOpenWithDebounce$ = combineLatest([this.isChildSubMenuOpen$, isCurrentSubmenuOpen$]).pipe(
       map(([isChildSubMenuOpen, isCurrentSubmenuOpen]) => isChildSubMenuOpen || isCurrentSubmenuOpen),
       auditTime(150),
-      distinctUntilChanged()
+      distinctUntilChanged(),
+      takeUntil(this.destroy$)
     );
     isSubMenuOpenWithDebounce$.pipe(distinctUntilChanged()).subscribe(data => {
       this.setOpenStateWithoutDebounce(data);
@@ -76,4 +78,9 @@ export class NzSubmenuService {
       }
     });
   }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 }

components/radio/radio-group.component.ts

@@ -76,13 +76,13 @@ export class NzRadioGroupComponent implements OnInit, ControlValueAccessor, OnDe
   }
 
   ngOnInit(): void {
-    this.nzRadioService.selected$.subscribe(value => {
+    this.nzRadioService.selected$.pipe(takeUntil(this.destroy$)).subscribe(value => {
       if (this.value !== value) {
         this.value = value;
         this.onChange(this.value);
       }
     });
-    this.nzRadioService.touched$.subscribe(() => {
+    this.nzRadioService.touched$.pipe(takeUntil(this.destroy$)).subscribe(() => {
       Promise.resolve().then(() => this.onTouched());
     });
 

components/table/src/table/table-fixed-row.component.ts

@@ -45,7 +45,7 @@ export class NzTableFixedRowComponent implements OnInit, OnDestroy, AfterViewIni
   ngOnInit(): void {
     if (this.nzTableStyleService) {
       const { enableAutoMeasure$, hostWidth$ } = this.nzTableStyleService;
-      enableAutoMeasure$.subscribe(this.enableAutoMeasure$);
+      enableAutoMeasure$.pipe(takeUntil(this.destroy$)).subscribe(this.enableAutoMeasure$);
       hostWidth$.subscribe(this.hostWidth$);
     }
   }

components/table/src/table/tbody.component.ts

@@ -4,9 +4,10 @@
  */
 /* tslint:disable:component-selector */
 
-import { ChangeDetectionStrategy, Component, Optional, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnDestroy, Optional, TemplateRef, ViewEncapsulation } from '@angular/core';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import { NzTableStyleService } from '../table-style.service';
 
 @Component({
@@ -32,23 +33,29 @@ import { NzTableStyleService } from '../table-style.service';
     '[class.ant-table-tbody]': 'isInsideTable'
   }
 })
-export class NzTbodyComponent {
+export class NzTbodyComponent implements OnDestroy {
   isInsideTable = false;
   showEmpty$ = new BehaviorSubject<boolean>(false);
   noResult$ = new BehaviorSubject<string | TemplateRef<NzSafeAny> | undefined>(undefined);
   listOfMeasureColumn$ = new BehaviorSubject<ReadonlyArray<string>>([]);
+  private destroy$ = new Subject<void>();
 
   constructor(@Optional() private nzTableStyleService: NzTableStyleService) {
     this.isInsideTable = !!this.nzTableStyleService;
     if (this.nzTableStyleService) {
       const { showEmpty$, noResult$, listOfMeasureColumn$ } = this.nzTableStyleService;
-      noResult$.subscribe(this.noResult$);
-      listOfMeasureColumn$.subscribe(this.listOfMeasureColumn$);
-      showEmpty$.subscribe(this.showEmpty$);
+      noResult$.pipe(takeUntil(this.destroy$)).subscribe(this.noResult$);
+      listOfMeasureColumn$.pipe(takeUntil(this.destroy$)).subscribe(this.listOfMeasureColumn$);
+      showEmpty$.pipe(takeUntil(this.destroy$)).subscribe(this.showEmpty$);
     }
   }
 
   onListOfAutoWidthChange(listOfAutoWidth: number[]): void {
     this.nzTableStyleService.setListOfAutoWidth(listOfAutoWidth);
   }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 }

components/table/src/table/thead.component.ts

@@ -132,7 +132,8 @@ export class NzTheadComponent implements AfterContentInit, OnDestroy, AfterViewI
             })
         ),
         // TODO: after checked error here
-        delay(0)
+        delay(0),
+        takeUntil(this.destroy$)
       );
       listOfCalcOperator$.subscribe(list => {
         this.nzTableDataService.listOfCalcOperator$.next(list);