Angular2 SliderShow

我想在angular2中構建滑塊，但是我遇到了很多麻煩。好的，讓我們來看看主要問題。爲什麼這個功能讓我這個錯誤Angular2 SliderShow

「Error錯誤：未捕獲的（在承諾）：引發RangeError：最大調用堆棧大小超出的RangeError：最大調用堆棧大小超出」

這是我的代碼（我已經嘗試了很多與ViewChild等的東西，現在卡住了這個問題）。

import { Component, OnInit, AfterViewInit, Input, ViewChild } 

from '@angular/core'; 

@Component({ 
    selector: 'slider', 
    template: ` 
     <div class="slider-container"> 
      <header> 
       <div class="slider-information"> 
        <span class="slider-information--title" id="slidername">Acer C720-2103 Chromebook</span> 
        <span class="slider-information--category"> 
         Category: <span id="slidercategory">Laptops</span> 
        </span> 
        <span class="slider-information--learnmore"> 
         More about <span id="sliderinfoname">Acer C720-2103 Chromebook</span> 
        </span> 
       </div> 
       <div class="slider-image"> 
        <img id="sliderimage" src="../../../images/slider/laptop-slider.jpg" alt="Laptop"> 
       </div> 
      </header> 
     </div> 
    `, 
    styles: [` 
     :host{ 
      overflow: hidden; 
     } 
    `] 
}) 
export class SliderComponent implements OnInit, AfterViewInit { 
    sliderCount: number = 0; 
    images: any[]; 
    constructor() { } 
    ngOnInit() { 
     this.images = this.createImages(); 
    } 
    ngAfterViewInit() { 
     this.slider(); 
    } 
    slider(): void{ 
     var slidername = document.getElementById('slidername'); 
     var sliderimage = document.getElementById('sliderimage'); 
     var sliderinfoname = document.getElementById('sliderinfoname'); 
     var slidercategory = document.getElementById('slidercategory'); 
     if(this.sliderCount > this.images.length - 1){ 
      this.sliderCount = 0; 
     } 
     slidername.innerHTML = this.images[this.sliderCount].name; 
     sliderimage.setAttribute('src', this.images[this.sliderCount].url); 
     sliderinfoname.innerHTML = this.images[this.sliderCount].name; 
     slidercategory.innerHTML = this.images[this.sliderCount].category; 
     this.sliderCount += 1; 
     debugger; 
     setTimeout(this.slider(), 2000); 
    } 
    createImages(): any[]{ 
     var newImages: any[]; 
     newImages = [ 
      { url: "../../../images/slider/laptop-slider.jpg", category: "Laptop" , name: "Acer C720-2103 Chromebook" }, 
      { url: "../../../images/slider/mobilephone-slider.jpg", category: "Phone", name: "Samsung Edge S6" } 
     ] 
     return newImages; 
    } 
}

什麼問題？

UPDATE

我改變了這種 setTimeout(this.slider(), 2000);到setTimeout(this.slider, 2000);。它只適用於第一次旅行。在第二次我得到「錯誤類型錯誤：無法讀取的未定義的屬性‘長’」

來源

2017-05-08 qwerty1234567

保持您的問題專注於您的錯誤信息;你做了什麼樣的調試來找出堆棧溢出的原因？「我的解決方案很好」對於Stack Overflow來說不是一個好問題，因爲它太寬泛，帖子應該是關於單個問題的，因此它們對其他人很有用。 –

我是debbugging找出如果文本和src被更改（是的，但只在調試模式）。 – qwerty1234567

已找到解決方案，但它提出了其他錯誤：/（更新） – qwerty1234567

首先你打電話

從this.slider()內this.slider()，因爲你調用它，而不是傳遞一個參考this.slider，即導致堆棧溢出。

現在您傳遞的參考文件沒有正確綁定this。將其更改爲

setTimeout(() => this.slider(), 2000);

這將運行this.slider()後2秒與this正確設置。見How to access the correct `this` context inside a callback?

如果您呼叫document.getElementById()，你是不是做事情角將有你。您要從DOM中挖掘的數據應該傳遞給您的組件，而不是將組件緊密耦合到環境。

來源

2017-05-08 22:39:55

非常感謝。改變了這個醜陋的getElementById :) – qwerty1234567

Angular2 SliderShow

回答

相關問題