fix(module:modal): content not work in confirm mode when the type is …

…component (#3415) close #3407
NG-ZORRO · May 17, 2019 · 6458c57 · 6458c57
1 parent 9d495fc
commit 6458c57
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 2 deletions.
diff --git a/components/modal/nz-modal.component.html b/components/modal/nz-modal.component.html
@@ -100,7 +100,7 @@
           </ng-container>
         </span>
         <div class="ant-modal-confirm-content">
-          <ng-container>
+          <ng-container #bodyContainer>
             <ng-container *ngIf="!isComponent(nzContent)" [ngSwitch]="true">
               <ng-container *ngSwitchCase="isTemplateRef(nzContent)" [ngTemplateOutlet]="nzContent"></ng-container>
               <ng-container *ngSwitchCase="isNonEmptyString(nzContent)"><div [innerHTML]="nzContent"></div></ng-container>

diff --git a/components/modal/nz-modal.spec.ts b/components/modal/nz-modal.spec.ts
@@ -278,9 +278,13 @@ describe('modal testing (legacy)', () => {
     beforeEach(async(() => {
       TestBed.configureTestingModule({
         imports: [NoopAnimationsModule, NzModalModule],
-        declarations: [TestConfirmModalComponent],
+        declarations: [TestConfirmModalComponent, TestConfirmCustomComponent],
         providers: [NzMeasureScrollbarService]
       }).compileComponents();
+
+      TestBed.overrideModule(BrowserDynamicTestingModule, {
+        set: { entryComponents: [TestConfirmCustomComponent] }
+      }).compileComponents();
     }));
 
     beforeEach(() => {
@@ -315,6 +319,17 @@ describe('modal testing (legacy)', () => {
       fixture.detectChanges();
       ids.forEach(id => expectModalDestroyed(id, false));
     }));
+
+    it('should render content with component', fakeAsync(() => {
+      const modalRef = instance.createCustomContentWithComponent();
+      const modalElement = modalRef.getElement();
+      fixture.detectChanges();
+      expect(modalElement.querySelector('.custom-component-in-confirm')).toBeTruthy();
+      getButtonOk(modalElement).click();
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+    }));
   });
 
   describe('css-unit.pipe', () => {
@@ -865,6 +880,23 @@ export class TestConfirmModalComponent {
       return modalId;
     });
   }
+
+  createCustomContentWithComponent(): NzModalRef {
+    return this.modalService.confirm({
+      nzContent: TestConfirmCustomComponent
+    });
+  }
+}
+
+@Component({
+  template: `
+    <span class="custom-component-in-confirm">
+      Content
+    </span>
+  `
+})
+export class TestConfirmCustomComponent {
+  constructor() {}
 }
 
 @Component({