feat(module:carousel): support dot render template (NG-ZORRO#1860)

close NG-ZORRO#1743
hsuanxyz · Jul 22, 2018 · 34752cc · 34752cc
1 parent 61ba4a0
commit 34752cc
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 3 deletions.
diff --git a/components/carousel/doc/index.en-US.md b/components/carousel/doc/index.en-US.md
@@ -21,6 +21,7 @@ A carousel component. Scales with its container.
 | `[nzAutoPlay]` | Whether to scroll automatically | boolean | `false` |
 | `[nzAutoPlaySpeed]` | Duration (milliseconds), does not scroll when set to 0 | number | 3000 |
 | `[nzDots]` | Whether to show the dots at the bottom of the gallery | boolean | `true` |
+| `[nzDotRender]` | Dot render template | `TemplateRef<{ $implicit: number }>` | - |
 | `[nzEffect]` | Transition effect | `scrollx` ｜ `fade` | `scrollx` |
 | `[nzVertical]` | Whether to use a vertical display | boolean | `false` |
 | `(nzAfterChange)` | Callback function called after the current index changes | `EventEmitter<number>` | - |

diff --git a/components/carousel/doc/index.zh-CN.md b/components/carousel/doc/index.zh-CN.md
@@ -22,11 +22,11 @@ subtitle: 走马灯
 | `[nzAutoPlay]` | 是否自动切换 | boolean | false |
 | `[nzAutoPlaySpeed]` | 切换时间(毫秒)，当设置为0时不切换 | number | 3000 |
 | `[nzDots]` | 是否显示面板指示点 | boolean | true |
+| `[nzDotRender]` | Dot渲染模板 | `TemplateRef<{ $implicit: number }>` | - |
 | `[nzEffect]` | 动画效果函数，可取 scrollx, fade | string | scrollx |
 | `[nzVertical]` | 垂直显示 | boolean | false |
 | `(nzAfterChange)` | 切换面板的回调 | `EventEmitter<number>` | 无 |
 | `(nzBeforeChange)` | 切换面板的回调 | `EventEmitter<{ from: number; to: number }>` | 无 |
-
 #### 方法
 
 | 名称 | 描述 |

diff --git a/components/carousel/nz-carousel.component.html b/components/carousel/nz-carousel.component.html
@@ -9,7 +9,11 @@
       *ngFor="let content of slideContents; let i =index"
       [class.slick-active]="content.isActive"
       (click)="setActive(content,i)">
-      <button>{{i + 1}}</button>
+      <ng-template [ngTemplateOutlet]="nzDotRender || renderDotTemplate" [ngTemplateOutletContext]="{ $implicit: i }"></ng-template>
     </li>
   </ul>
-</div>
+</div>
+
+<ng-template #renderDotTemplate let-index>
+  <button>{{index + 1}}</button>
+</ng-template>
diff --git a/components/carousel/nz-carousel.component.ts b/components/carousel/nz-carousel.component.ts
@@ -12,6 +12,7 @@ import {
   Output,
   QueryList,
   Renderer2,
+  TemplateRef,
   ViewChild
 } from '@angular/core';
 
@@ -86,6 +87,8 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy, AfterConte
     return this.activeIndex > 0 ? (this.activeIndex - 1) : (this.slideContents.length - 1);
   }
 
+  @Input() nzDotRender: TemplateRef<{ $implicit: number }>;
+
   @Input()
   set nzDots(value: boolean) {
     this._dots = toBoolean(value);

diff --git a/components/carousel/nz-carousel.spec.ts b/components/carousel/nz-carousel.spec.ts
@@ -54,6 +54,14 @@ describe('carousel', () => {
       fixture.detectChanges();
       expect(carouselWrapper.nativeElement.querySelector('.slick-dots')).toBeNull();
     });
+    it('should nzDotRender work', () => {
+      fixture.detectChanges();
+      expect(testComponent.dots).toBe(true);
+      expect(carouselWrapper.nativeElement.querySelector('.slick-dots').children.length).toBe(4);
+      expect(carouselWrapper.nativeElement.querySelector('.slick-dots').firstElementChild.innerText).toBe('1');
+      expect(carouselWrapper.nativeElement.querySelector('.slick-dots').lastElementChild.innerText).toBe('4');
+      expect(carouselWrapper.nativeElement.querySelector('.slick-dots').firstElementChild.firstElementChild.tagName).toBe('A');
+    });
     it('should click content change', () => {
       fixture.detectChanges();
       expect(carouselContents[ 0 ].nativeElement.classList).toContain('slick-active');
@@ -168,11 +176,13 @@ describe('carousel', () => {
       [nzEffect]="effect"
       [nzVertical]="vertical"
       [nzDots]="dots"
+      [nzDotRender]="dotRender"
       [nzAutoPlay]="autoPlay"
       [nzAutoPlaySpeed]="autoPlaySpeed"
       (nzAfterChange)="afterChange($event)"
       (nzBeforeChange)="beforeChange($event)">
       <div nz-carousel-content *ngFor="let index of array"><h3>{{index}}</h3></div>
+      <ng-template #dotRender let-index><a>{{index+1}}</a></ng-template>
     </nz-carousel>`
 })
 export class NzTestCarouselBasicComponent {