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

一. 选择正确的组件库

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

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

 

二. 封装nz-carousel

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

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

<app-wy-carousel #wyCarousel [activeIndex]="curIndex" (slideChange)="onSlideChange($event)">
    <div class="carousel wrap">
      <nz-carousel 
      nzAutoPlay="true"
      nzEffect="fade" 
      [nzDotRender]="wyCarousel.dotRender"
      (nzBeforeChange)="onBeforeChange($event)"
      >
        <div class="carousel-item" nz-carousel-content *ngFor="let item of banners">
          <a [href]=