【angular2+typeScript+ng-zorro】Carousel 走马灯的左右方向控件实现
程序员文章站
2022-09-07 18:05:03
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>
下一篇: 隔壁有一个不敢惹的邻居