ng zorro Carousel 走馬燈的左右方向控制項實現 ng zorro框架的走馬燈本身還沒有左右方向控制項的實現,作者只是在文檔中(0.6x)中曝出幾個方法介面,如圖: 實現: 在根component中引入NzCarouselComponent 組件 在需要引用carousel的父組件中引入N ...
ng-zorro Carousel 走馬燈的左右方向控制項實現
ng-zorro框架的走馬燈本身還沒有左右方向控制項的實現,作者只是在文檔中(0.6x)中曝出幾個方法介面,如圖:
實現:
在根component中引入NzCarouselComponent 組件
import { NzCarouselComponent } from 'ng-zorro-antd';
在需要引用carousel的父組件中引入NzCarouselComponent 組件
在需要引用carousel的父組件中引入NzCarouselComponent 組件將其作為子組件
import { NzCarouselComponent } from 'ng-zorro-antd';
html中綁定子組件並添加點擊方法
通過把本地變數#carousel,將NzCarouselComponent組件綁定到父組件
<div class="controlContainer">
<span class="controlBar" (click)="carousel.nzSlickPrev()">
<i class="anticon anticon-left"></i>
</span>
<span class="controlBar" (click)="carousel.nzSlickNext()">
<i class="anticon anticon-right"></i>
</span>
</div>
<nz-carousel class="homeCarousel" #carousel>
...
</nz-carousel>