fix(module: accordion): fix accordion support async load accordionPan…

…el (#355)
NG-ZORRO · Mar 25, 2019 · 924bcc2 · 924bcc2
1 parent aeb3cbe
commit 924bcc2
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/components/accordion/accordion.component.spec.ts b/components/accordion/accordion.component.spec.ts
@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, OnInit } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { async, ComponentFixture, fakeAsync, tick, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -112,7 +112,7 @@ describe('AccordionComponent', () => {
     </Accordion>
   `
 })
-export class TestAccordionComponent {
+export class TestAccordionComponent implements OnInit {
   defaultActiveKey = '0';
   accordions: Array<any> = [{ title: 'Title 1', child: ['content 1', 'content 1', 'content 1'],  inactive: false },
                             { title: 'Title 2', child: ['content 2', 'content 2', 'content 2'] }];
@@ -125,4 +125,11 @@ export class TestAccordionComponent {
   onChange(event) {
     console.log(event);
   }
+
+  ngOnInit() {
+    setTimeout(() => {
+      this.accordions = [{ title: 'Title 1', child: ['content 1', 'content 1', 'content 1'],  inactive: false },
+      { title: 'Title 2', child: ['content 2', 'content 2', 'content 2'] }];
+    }, 0);
+  }
 }
diff --git a/components/accordion/accordion.component.ts b/components/accordion/accordion.component.ts
@@ -25,6 +25,8 @@ import { Subscription } from 'rxjs';
 export class AccordionComponent implements AfterContentInit, OnDestroy, OnChanges {
   private _oldGroups: AccordionGroupComponent[];
   private _subscription: Subscription;
+  private groupsSubscription: Subscription;
+  private isFirstChange: boolean = true;
 
   @ContentChildren(forwardRef(() => AccordionGroupComponent))
   groups: QueryList<AccordionGroupComponent>;
@@ -95,6 +97,7 @@ export class AccordionComponent implements AfterContentInit, OnDestroy, OnChange
           if (index === parseInt(key, 0)) {
             setTimeout(() => {
               group.isOpened = true;
+              group.openOnInitialization();
             }, 0);
           }
         });
@@ -104,6 +107,7 @@ export class AccordionComponent implements AfterContentInit, OnDestroy, OnChange
         if (index === parseInt(this.defaultActiveKey, 0)) {
           setTimeout(() => {
             group.isOpened = true;
+            group.openOnInitialization();
           }, 0);
         }
       });
@@ -129,12 +133,24 @@ export class AccordionComponent implements AfterContentInit, OnDestroy, OnChange
   }
 
   ngAfterContentInit() {
-    this.init();
+    if (this.groups && this.groups.length > 0) {
+      this.init();
+    } else {
+      this.groupsSubscription = this.groups.changes.subscribe(group => {
+        if (this.isFirstChange) {
+          this.init();
+        }
+        this.isFirstChange = false;
+      });
+    }
   }
 
   ngOnDestroy() {
     if (this._subscription) {
       this._subscription.unsubscribe();
     }
+    if (this.groupsSubscription) {
+      this.groupsSubscription.unsubscribe();
+    }
   }
 }