fix(module:collapse): fix collapse (#2597)

close #2567
NG-ZORRO · Dec 6, 2018 · 5bb1a99 · 5bb1a99
1 parent 2f4b9f3
commit 5bb1a99
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 41 deletions.
diff --git a/components/collapse/nz-collapse-panel.component.ts b/components/collapse/nz-collapse-panel.component.ts
@@ -3,17 +3,16 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  EventEmitter,
+  EventEmitter, Host,
   HostBinding,
-  Input,
+  Input, OnDestroy, OnInit,
   Output,
   TemplateRef,
   ViewEncapsulation
 } from '@angular/core';
 
-import { Subject } from 'rxjs';
-
 import { InputBoolean } from '../core/util/convert';
+import { NzCollapseComponent } from './nz-collapse.component';
 
 @Component({
   selector       : 'nz-collapse-panel',
@@ -45,24 +44,31 @@ import { InputBoolean } from '../core/util/convert';
   }
 })
 
-export class NzCollapsePanelComponent {
+export class NzCollapsePanelComponent implements OnInit, OnDestroy {
   @Input() @InputBoolean() @HostBinding('class.ant-collapse-item-active') nzActive = false;
   @Input() @InputBoolean() @HostBinding('class.ant-collapse-item-disabled') nzDisabled = false;
   @Input() @InputBoolean() nzShowArrow = true;
   @Input() nzHeader: string | TemplateRef<void>;
   @Output() readonly nzActiveChange = new EventEmitter<boolean>();
-  click$ = new Subject<NzCollapsePanelComponent>();
 
   clickHeader(): void {
     if (!this.nzDisabled) {
-      this.click$.next(this);
+      this.nzCollapseComponent.click(this);
     }
   }
 
   markForCheck(): void {
     this.cdr.markForCheck();
   }
 
-  constructor(private cdr: ChangeDetectorRef) {
+  constructor(private cdr: ChangeDetectorRef, @Host() private nzCollapseComponent: NzCollapseComponent) {
+  }
+
+  ngOnInit(): void {
+    this.nzCollapseComponent.addPanel(this);
+  }
+
+  ngOnDestroy(): void {
+    this.nzCollapseComponent.removePanel(this);
   }
 }
diff --git a/components/collapse/nz-collapse.component.ts b/components/collapse/nz-collapse.component.ts
@@ -1,16 +1,10 @@
 import {
-  AfterContentInit,
   ChangeDetectionStrategy,
   Component,
-  ContentChildren,
   Input,
-  OnDestroy,
-  QueryList,
   ViewEncapsulation
 } from '@angular/core';
-
-import { merge, Subject, Subscription } from 'rxjs';
-import { startWith, takeUntil } from 'rxjs/operators';
+import { NzCheckboxComponent } from '../checkbox';
 import { InputBoolean } from '../core/util/convert';
 import { NzCollapsePanelComponent } from './nz-collapse-panel.component';
 
@@ -25,12 +19,18 @@ import { NzCollapsePanelComponent } from './nz-collapse-panel.component';
     }`
   ]
 })
-export class NzCollapseComponent implements AfterContentInit, OnDestroy {
-  @ContentChildren(NzCollapsePanelComponent) listOfNzCollapsePanelComponent: QueryList<NzCollapsePanelComponent>;
+export class NzCollapseComponent {
+  private listOfNzCollapsePanelComponent: NzCollapsePanelComponent[] = [];
   @Input() @InputBoolean() nzAccordion = false;
   @Input() @InputBoolean() nzBordered = true;
-  private destroy$ = new Subject();
-  private clickSubscription: Subscription;
+
+  addPanel(value: NzCollapsePanelComponent): void {
+    this.listOfNzCollapsePanelComponent.push(value);
+  }
+
+  removePanel(value: NzCollapsePanelComponent): void {
+    this.listOfNzCollapsePanelComponent.splice(this.listOfNzCollapsePanelComponent.indexOf(value), 1);
+  }
 
   click(collapse: NzCollapsePanelComponent): void {
     if (this.nzAccordion && !collapse.nzActive) {
@@ -45,26 +45,4 @@ export class NzCollapseComponent implements AfterContentInit, OnDestroy {
     collapse.nzActive = !collapse.nzActive;
     collapse.nzActiveChange.emit(collapse.nzActive);
   }
-
-  ngAfterContentInit(): void {
-    this.listOfNzCollapsePanelComponent.changes.pipe(
-      startWith(null),
-      takeUntil(this.destroy$)
-    ).subscribe(() => {
-      if (this.clickSubscription) {
-        this.clickSubscription.unsubscribe();
-      }
-      this.clickSubscription = merge(...this.listOfNzCollapsePanelComponent.map(item => item.click$)).pipe(
-        takeUntil(this.destroy$)
-      ).subscribe((data) => {
-        this.click(data);
-      });
-    });
-
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
 }