.net-core - 使用 Blazor Webassembly 将 blazor 组件动态添加到 owlCarousel 的问题

Question

我正在开发一个项目，该项目使用 owl-carousel 作为 Blazor Webassembly 中的主页滑块。如果我使用下面的代码动态加载带有幻灯片的滑块，则轮播效果很好。

@for (int i=0; i <= 4;  i++)
{
int skey = i;
    <SliderItem @key="skey" />
}  

但是，如果我引入如下动态对象；旋转木马不起作用

@if (Sliders != null && Sliders.Count > 0)
{
foreach (var item in Sliders)
{
<SliderItem @key="item.PromotionId" Slider="item" />
}
}

SliderItem 组件如下所示

<div class="yt-content-slide">
    <a href="#"><img src="image/catalog/slideshow/home2/slide-1.jpg" alt="slider1" class="img-responsive"></a>
</div>

@code {
    [Parameter] public PromotionVM Slider { get; set; }
}

这就是我在 App.razor 中初始化轮播的方式

@code {
    protected async override Task OnAfterRenderAsync(bool firstRender)
    { 
        await js.StartSlider();
    }
}

这是启动轮播的 javascript

// Content slider
window.carouselSlider = {
    startCarouselSlider: function () {
        $('.yt-content-slider').each(function () {
            var $slider = $(this),
                $panels = $slider.children('div'),
                data = $slider.data();
            // Remove unwanted br's
            //$slider.children(':not(.yt-content-slide)').remove();
            // Apply Owl Carousel
            $slider.owlCarousel({
                responsiveClass: true,
                mouseDrag: true,
                video: true,
                lazyLoad: (data.lazyload == 'yes') ? true : false,
                autoplay: (data.autoplay == 'yes') ? true : false,
                autoHeight: (data.autoheight == 'yes') ? true : false,
                autoplayTimeout: data.delay * 1000,
                smartSpeed: data.speed * 1000,
                autoplayHoverPause: (data.hoverpause == 'yes') ? true : false,
                center: (data.center == 'yes') ? true : false,
                loop: (data.loop == 'yes') ? true : false,
                dots: (data.pagination == 'yes') ? true : false,
                nav: (data.arrows == 'yes') ? true : false,
                dotClass: "owl-dot",
                dotsClass: "owl-dots",
                margin: data.margin,
                navText: ['', ''],

                responsive: {
                    0: {
                        items: data.items_column4
                    },
                    480: {
                        items: data.items_column3
                    },
                    768: {
                        items: data.items_column2
                    },
                    992: {
                        items: data.items_column1
                    },
                    1200: {
                        items: data.items_column0
                    },
                    1650: {
                        items: data.items_column00
                    }
                }
            });

        });
    }
}

注意：我还尝试将容器的引用传递给 javascript，以便在循环显示幻灯片完成后重新初始化轮播。喜欢

<div class="module sohomepage-slider home-slider-size" @ref="sliderRef">
    <!—Slider with slides goes in here--!>
</div>

    ElementReference sliderRef;
    
    private void StartHomeSlider()
        {
            ijs.StartHomeSlider(sliderRef);
        }

并且以这种方式收到的javascript

window.homeSlider = {
    startHomeCarouselSlider: function (element) {
        var $slider = $(element.querySelector('.yt-content-slider'));
        var $panels = $slider.children('div');
        var data = $slider.data();
        alert($panels.length);

        // Remove unwanted br's
        $slider.children(':not(.yt-content-slide)').remove();
        // Apply Owl Carousel
        $slider.owlCarousel({
            responsiveClass: true,
            mouseDrag: true,
            video: true,
            lazyLoad: (data.lazyload == 'yes') ? true : false,
            autoplay: (data.autoplay == 'yes') ? true : false,
            autoHeight: (data.autoheight == 'yes') ? true : false,
            autoplayTimeout: data.delay * 1000,
            smartSpeed: data.speed * 1000,
            autoplayHoverPause: (data.hoverpause == 'yes') ? true : false,
            center: (data.center == 'yes') ? true : false,
            loop: (data.loop == 'yes') ? true : false,
            dots: (data.pagination == 'yes') ? true : false,
            nav: (data.arrows == 'yes') ? true : false,
            dotClass: "owl-dot",
            dotsClass: "owl-dots",
            margin: data.margin,
            navText: ['', ''],

            responsive: {
                0: {
                    items: data.items_column4
                },
                480: {
                    items: data.items_column3
                },
                768: {
                    items: data.items_column2
                },
                992: {
                    items: data.items_column1
                },
                1200: {
                    items: data.items_column0
                },
                1650: {
                    items: data.items_column00
                }
            }
        });
    }
}

但我得到的只是这个

请问，我该怎么做。

标签： .net-coreblazorowl-carouselblazor-client-sideblazor-webassembly