Angular2幻灯片

Posted 2023-02-26

【中文标题】Angular2幻灯片

【英文标题】：Angular2 SliderShow

【发布时间】：2017-05-08 22:12:31

【问题描述】：

我想在 angular2 中构建滑块，但我遇到了很多麻烦。好的，让我们进入主要问题。为什么这个函数给我这个错误

"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" >
                </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;
    

有什么问题？

更新

我改变了这个 setTimeout(this.slider(), 2000); 到 setTimeout(this.slider, 2000);。它仅在第一次迭代中有效。在第二个我得到“错误类型错误：无法读取未定义的属性'长度'”

【问题讨论】：

让你的问题集中在你的错误信息上；你做了什么样的调试来找出你的堆栈溢出的原因？ “我的解决方案好吗”对于 Stack Overflow 来说不是一个好问题，因为它太宽泛了，帖子应该是关于一个问题的，所以它们对其他人有用。

我正在调试以了解 text 和 src 是否已更改（是的，但仅在调试模式下）。

已经找到了解决办法，但是又犯了其他的bug：/（更新）

我建议您查看 angular 2 文档以了解如何使其更简单：angular.io/docs/ts/latest/guide/displaying-data.html

【参考方案1】：

你先打电话

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()，你就没有像 Angular 那样做。您从 DOM 中挖掘出来的数据应该传递给您的组件，而不是将您的组件与环境紧密耦合。

【讨论】：

非常感谢。改变了这个丑陋的 getElementById :)