如何将此 Bootstrap 轮播制作成可重用的 Razor 组件以在 Blazor 应用程序中使用

Question

我正在构建一个用于 Blazor 客户端应用程序的 Razor 组件。我想知道如何使组件中使用的图像动态化，并在调用该组件的页面代码块中设置图像。

这是我的 Carousel.razor 组件

@inject IJSRuntime JsRuntime
@namespace BlazorFrontend.Components

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0"  class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1" ></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2" ></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="pictures/foo.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="pictures/bar.jpg" alt="Second slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="pictures/foobar.jpg" alt="Third slide">
        </div>
    </div>
    <a class="carousel-control-prev" role="button" id="carouselExampleIndicators-prev" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" id="carouselExampleIndicators-next" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

@code{
    protected override async Task OnInitializedAsync()
        {
            foreach (System.Collections.DictionaryEntry de in Environment.GetEnvironmentVariables())
            {
                System.Console.WriteLine("ENVVAR: key=" + de.Key + " value=" + de.Value);
                System.Console.WriteLine(Environment.GetEnvironmentVariable("ASSETS"));
            }
        }
        private string AssetsEndpoint = Environment.GetEnvironmentVariable("ASSETS");
        bool firstRender = true;

        protected async override Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                await JsRuntime.InvokeAsync<object>("initializeCarousel");
                firstRender = false;
            }
        }
}

理想情况下，我会喜欢做这样的事情：

  <img class="d-block w-100" src=@slide1 alt="First slide">

code{
    string slide1;
}

在页面的代码块中，我正在使用以下组件：

<Carousel></Carousel>

code{
    slide1 = "pictures/foo.jpg"
}

例如，但这当然行不通。 right/Blazor 这样做的方法是什么？

Answer 1

BlazorStrap 基本上已经这样做了，他们的 Carousels sample page 也展示了一种相当 Blazor-esque 的方法。来自第一个例子：

<BSCarousel NumberOfItems="@items.Count">
    <BSCarouselIndicators NumberOfItems="@items.Count">
    <div class="carousel-inner">
        @for (int i = 0; i <<> items.Count; i++)
        {
            <BSCarouselItem src="@items[i].Source" alt="@items[i].Alt">
        }
    </div>
    <BSCarouselControl CarouselDirection="CarouselDirection.Previous" NumberOfItems="@items.Count">
    <BSCarouselControl CarouselDirection="CarouselDirection.Next" NumberOfItems="@items.Count">
</BSCarousel>

让我们先进一步简化一下：

<BSCarousel NumberOfItems="@items.Count">
    <div class="carousel-inner">
        @for (int i = 0; i <<> items.Count; i++)
        {
            <BSCarouselItem src="@items[i].Source" alt="@items[i].Alt">
        }
    </div>
</BSCarousel>

这里要注意的关键方面：

有一个 Blazor 组件 BSCarousel 在语义上充当容器，并且还可以与其子组件进行交互
每个添加的项目都有 另一个 Blazor 组件 BSCarouselItem。这种方法使您相当灵活，并且可能正是您所要求的。轮播中有更多图块？只需添加另一个项目。然后，父 BSCarousel 组件需要处理它们的排列。
像 @for 和 @items.Count 这样的 Razor 语法用于在需要的地方轻松穿插 C#，但实际上，C# 在这里更多地用作模板语言
相比之下，根本不需要 @code { } 块（不过请注意，该块 之外的所有内容 最终都会转换为 C#）

我猜您的主要问题是：如何将多个项目放入一个组件中？通过制作另一个处理单个项目的组件。 :-)

如何将此 Bootstrap 轮播制作成可重用的 Razor 组件以在 Blazor 应用程序中使用

How to make this Bootstrap Carousel into reusable Razor component to use in Blazor app

blazor

razor-components

blazor-client-side