angular2实现图片轮播

import {Component,OnInit} from "@angular/core";

@Component({
     moduleId: module.id,
     selector: 'my-app',
     template: `
     <div class="bannerContainer">
       <ul class="bannerPicList"> 
         <li [class.active]="currentPic==0"> <img src="assets/img/category01.jpg"/></li>
         <li [class.active]="currentPic==1"> <img src="assets/img/category02.jpg"/></li>
         <li [class.active]="currentPic==2"> <img src="assets/img/category03.jpg"/></li>
       </ul>
       <ul class="bannerBtnList"> 
         <li><span class="picBtn" (click)="changebanner(0)">●</span></li>
         <li><span class="picBtn" (click)="changebanner(1)">●</span></li>
         <li><span class="picBtn" (click)="changebanner(2)">●</span></li>
       </ul>
     </div>
     `,
     styles: [`
         .bannerPicList li{
             display: none;
         }
         .bannerPicList li.active{
             display: block;
         }
         .bannerContainer .bannerBtnList {
             position: absolute;
             top: 360px;
             left: 116px;
           
         }
         .bannerContainer .bannerBtnList li {
             float: left;
             margin: 0 5px;
             list-style-type:none;
         }
         .bannerContainer .bannerBtnList span.picBtn {
             margin: 20px;
             height: 10px;
             width: 10px;
             background-color: #ddd;
            display: block;
             border-radius: 5px;
             cursor: pointer;
         }
     `]
})
 export class TestComponent implements OnInit {
    currentPic = 0;
      constructor() {
           setInterval(() => {
                  let id = (this.currentPic + 1) % 3;
                 this.currentPic = id;
        },3000)
       }

      changebanner(id) {
             console.log(id)
            this.currentPic = id;
        }
     ngOnInit() { }
   }