Angular 4 + JavaScript - 簡單的幻燈片顯示不起作用

Question

. 所以我把<script>放在一個組件 。

is in a <router-outlet> which inside or AppComponent. 位於或AppComponent內的<router-outlet>中。

我已經在單個index.html文件（非角度或非基於組件）中測試了這個。 但我不知道為什么它在Angular 4中不起作用（基於組件）

) start.component.html （ ）

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

我已經創建了這個簡單的plunker如何在angular2中做到這一點。 請看一下home.component文件。 這將讓您了解如何以angular2方式解決這個問題。

結帳這個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];
  }
}