diff --git a/components/popconfirm/nz-popconfirm.directive.ts b/components/popconfirm/nz-popconfirm.directive.ts index 5d8918b74f5..af897f088d0 100644 --- a/components/popconfirm/nz-popconfirm.directive.ts +++ b/components/popconfirm/nz-popconfirm.directive.ts @@ -86,7 +86,10 @@ export class NzPopconfirmDirective extends NzTooltipDirective implements OnInit, ngOnInit(): void { if (!this.tooltip) { - this.tooltip = this.hostView.createComponent(this.factory).instance; + const tooltipComponent = this.hostView.createComponent(this.factory); + this.tooltip = tooltipComponent.instance; + // Remove element when use directive https://github.com/NG-ZORRO/ng-zorro-antd/issues/1967 + this.renderer.removeChild(this.renderer.parentNode(this.elementRef.nativeElement), tooltipComponent.location.nativeElement); this.isDynamicTooltip = true; const properties = [ 'nzTitle', diff --git a/components/popconfirm/nz-popconfirm.spec.ts b/components/popconfirm/nz-popconfirm.spec.ts index 3a7de1a86f9..fc0c0d82b9c 100644 --- a/components/popconfirm/nz-popconfirm.spec.ts +++ b/components/popconfirm/nz-popconfirm.spec.ts @@ -239,6 +239,11 @@ describe('NzPopconfirm', () => { tick(); expect(overlayContainerElement.querySelector('.ant-popover-message-title')).toBeNull(); })); + it('should not create element', fakeAsync(() => { + fixture.detectChanges(); + const triggerElement = component.inBtnGroup.nativeElement; + expect(triggerElement.nextSibling.tagName).toBe('BUTTON'); + })); }); }); @@ -248,6 +253,11 @@ describe('NzPopconfirm', () => { Delete Delete title-template +
+ + + +
` }) export class NzpopconfirmTestNewComponent { @@ -256,6 +266,7 @@ export class NzpopconfirmTestNewComponent { condition = false; @ViewChild('stringTemplate') stringTemplate: ElementRef; @ViewChild('templateTemplate') templateTemplate: ElementRef; + @ViewChild('inBtnGroup') inBtnGroup: ElementRef; } diff --git a/components/popover/nz-popover.spec.ts b/components/popover/nz-popover.spec.ts index 0a2134cc63c..1f49e1e8ec4 100644 --- a/components/popover/nz-popover.spec.ts +++ b/components/popover/nz-popover.spec.ts @@ -171,6 +171,12 @@ describe('NzPopover', () => { expect(overlayContainerElement.querySelector('.ant-popover-title')).toBeNull(); expect(overlayContainerElement.querySelector('.ant-popover-inner-content')).toBeNull(); })); + + it('should not create element', fakeAsync(() => { + fixture.detectChanges(); + const triggerElement = component.inBtnGroup.nativeElement; + expect(triggerElement.nextSibling.tagName).toBe('BUTTON'); + })); }); }); @@ -185,6 +191,11 @@ describe('NzPopover', () => { content-template +
+ + + +
` }) export class NzPopoverTestNewComponent { @@ -192,6 +203,7 @@ export class NzPopoverTestNewComponent { @ViewChild('stringPopover', { read: NzPopoverDirective }) stringPopoverNzPopoverDirective: NzPopoverDirective; @ViewChild('templatePopover') templatePopover: ElementRef; @ViewChild('templatePopover', { read: NzPopoverDirective }) templatePopoverNzPopoverDirective: NzPopoverDirective; + @ViewChild('inBtnGroup') inBtnGroup: ElementRef; } @Component({ diff --git a/components/tooltip/nz-tooltip.directive.ts b/components/tooltip/nz-tooltip.directive.ts index 63220cfe506..31110ade915 100644 --- a/components/tooltip/nz-tooltip.directive.ts +++ b/components/tooltip/nz-tooltip.directive.ts @@ -186,7 +186,10 @@ export class NzTooltipDirective implements AfterViewInit, OnInit, OnDestroy { ngOnInit(): void { // Support faster tooltip mode: . [NOTE] Used only under NzTooltipDirective currently. if (!this.tooltip) { - this.tooltip = this.hostView.createComponent(this.factory).instance; + const tooltipComponent = this.hostView.createComponent(this.factory); + this.tooltip = tooltipComponent.instance; + // Remove element when use directive https://github.com/NG-ZORRO/ng-zorro-antd/issues/1967 + this.renderer.removeChild(this.renderer.parentNode(this.elementRef.nativeElement), tooltipComponent.location.nativeElement); this.isDynamicTooltip = true; const properties = [ 'nzTitle', 'nzContent', 'nzOverlayClassName', 'nzOverlayStyle', 'nzMouseEnterDelay', 'nzMouseLeaveDelay', 'nzVisible', 'nzTrigger', 'nzPlacement' ]; properties.forEach(property => this.updateCompValue(property, this[ property ])); diff --git a/components/tooltip/nz-tooltip.spec.ts b/components/tooltip/nz-tooltip.spec.ts index 49d1c836705..a7dfe977226 100644 --- a/components/tooltip/nz-tooltip.spec.ts +++ b/components/tooltip/nz-tooltip.spec.ts @@ -193,6 +193,7 @@ describe('NzTooltip', () => { tick(); // wait for next tick to hide expect(overlayContainerElement.textContent).not.toContain(featureKey); })); + it('should nzTitle support template', fakeAsync(() => { const featureKey = 'title-template'; const triggerElement = component.titleTemplate.nativeElement; @@ -227,6 +228,13 @@ describe('NzTooltip', () => { tick(); // wait for next tick to hide expect(overlayContainerElement.textContent).not.toContain(featureKey); })); + + it('should not create element', fakeAsync(() => { + fixture.detectChanges(); + const triggerElement = component.inBtnGroup.nativeElement; + expect(triggerElement.nextSibling.tagName).toBe('BUTTON'); + })); + }); }); @@ -239,6 +247,11 @@ describe('NzTooltip', () => { title-template +
+ + + +
` }) export class NzTooltipTestNewComponent { @@ -246,6 +259,8 @@ export class NzTooltipTestNewComponent { @ViewChild('titleString', { read: NzTooltipDirective }) titleStringNzTooltipDirective: NzTooltipDirective; @ViewChild('titleTemplate') titleTemplate: ElementRef; @ViewChild('titleTemplate', { read: NzTooltipDirective }) titleTemplateNzTooltipDirective: NzTooltipDirective; + @ViewChild('inBtnGroup') inBtnGroup: ElementRef; + } @Component({