【Angular实战/网易云】轮播图

一. 选择正确的组件库

选用正确的组件库能让你的开发事半功倍，material里面是没有carousel的，所以我选择ng-zorro。

ng-zorro中的nz-carousel已经非常好了，但是我这里还是选择封装一下。

 

二. 封装nz-carousel

我主要是想给原来的轮播图加上左（<）右（>）两个按钮，同时切换的dot也得变一下。

我们可以写一个新的组件，使用这个组件的时候把嵌套在内部，在实现这个组件的时候，使用来访问添加的内容。再加上新的元素。

新加的几个元素：

 

三. 编写事件

主要实现这么几个功能：

当你单击left这个按钮的时候，幻灯片就会向前切换；当你单击right这个按钮的时候，幻灯片就会向后切换。

其实这个功能我们在模板的代码中已经写了，主要思想就是调用幻灯片内置的方法：

  onSlideChange(changeType: 'pre' | 'next') {
    this.carousel[changeType]();
  }

 切换面板时显示相应的轮播图：

  onBeforeChange({to}) {
    this.curIndex = to;
  }

 

四. 效果展示