0

我正在构建一个用于 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"
}

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

4

1 回答 1

1

BlazorStrap 基本上已经做到了这一点，他们的Carousels 示例页面也显示了一种相当 Blazor 式的做法。从第一个例子：

<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组件需要处理它们的排列。
  • Razor 语法类似于@forand@items.Count用于在需要的地方轻松地穿插 C#，但实际上，C# 在这里更多地用作模板语言
  • 相比之下，@code { }根本不需要块（但请注意，该块之外的所有内容最终都会转换为 C#）

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

于 2020-03-07T07:38:43.497 回答