javascript - Angular 4 + JavaScript - 简单的幻灯片不起作用

Question

所以我把 <script>在单个组件内，StartComponent。

StartComponent 位于 <router-outlet> 中位于 Root 或 AppComponent 内。

我已经在一个 index.html 中测试了这个工作文件(非 Angular 或非基于组件)。但我不知道为什么它在 Angular 4(基于组件)中不起作用

start.component.html (StartComponent)

var i = 0;
var images = [];
var time = 1000;

// Image list
images[0] = 'assets/pictures/kapal02.jpg';
images[1] = 'assets/pictures/kapal01.jpg';
images[2] = 'assest/pictures/truck.jpg';

// Function
function changeImage() {
    document.getElementById('slideshow').src = images[i];

    if(i < images.length - 1) {
      i++;
    }
    else {
      i = 0;
    }

    setTimeout("changeImage()", time);
}

window.onload = changeImage;


<img id="slideshow" src="assets/pictures/kapal02.jpg">

Answer 1

我创建了这个简单的插件来说明如何在 angular2 中执行此操作。请查看 home.component 文件。这将使您了解如何以 angular2 方式解决这个问题。

Checkout this Plunker

主页组件代码如下

export class HomeComponent implements OnInit {
  urlVariable:string;
  images:Array<any>
  ngOnInit() {
        var i = 0;
        this.images = [];
        var time = 1000;

        // Image list
        this.images[0] = 'http://i64.tinypic.com/2czam2x.jpg';
        this.images[1] = 'http://i63.tinypic.com/2czanp2.jpg';
        this.images[2] = 'http://i63.tinypic.com/2czaq8k.jpg';

        this.urlVariable = this.images[0];
  }

  setImage(index:number){
     this.urlVariable = this.images[index];
  }
}