Blazor 的依赖注入问题

Question

我正在使用 .NET 5 和 Blazor，并且我正在使用 DevExpress 创建饼图。

我的问题是，在主页面内部，我有几个 blazor 组件，每个组件都有一个 DevExpress 饼图。

我需要在每个组件内部注入一个类，并且我需要每个组件管理他自己的这个对象的实例，但是看起来我每个 URL 都有一个对象，我该如何解决这个问题？

这是带有一个 DevExpress 圆环图的组件之一的代码：

@using System.Drawing;
@inject IColorPaletteService _colorPaletteService

<hr class="border-gold" />
<h4 class="text-center text-active">Overall</h4>


<DxChart Data="@_genderList" CustomizeSeriesPoint="@PreparePointColor"
         CssClass="w-100">
    <DxChartLegend Visible="false" />

    <DxChartDonutSeries ValueField="@((DashboardValues i) => i.Value)"
                        ArgumentField="@(i => i.Detail)"
                        SummaryMethod="Enumerable.Sum">
    </DxChartDonutSeries>
</DxChart>

<div style="position: relative; top: -26%; left: 90%; transform: translate(-50%, -50%);">
    <h1 class="text-secondary">@Completed%</h1>
</div>


@code {
    private IEnumerable<DashboardValues> _genderList;
    private int Completed { get; set; }
    
    protected override void OnInitialized()
    {
        base.OnInitialized();

        _genderList = new List<DashboardValues>
        {
            new DashboardValues {Id = 1, Detail = "Completed", Value = 90},
            new DashboardValues {Id = 1, Detail = "Remaining", Value = 10},
        };

        Completed = _genderList.First(x => x.Detail == "Completed").Value;
    }

    protected void PreparePointColor(ChartSeriesPointCustomizationSettings pointSettings)
    {
        pointSettings.PointAppearance.Color = _colorPaletteService.GetNextColor;
    }
}

这是我要注入的对象：

@inject IColorPaletteService _colorPaletteService

这是我要注入的类的代码：

using System.Collections.Generic;
using System.Drawing;

namespace WebClient.Services.Dashboard
{
    public class ColorPaletteService: IColorPaletteService
    {
        private List<Color> ColorList { get; set; }
        private int CurrentColorIndex { get; set; }
        private int ListLenght { get; set; }

        public ColorPaletteService()
        {
            CurrentColorIndex = 0;

            ColorList = new List<Color>
            {
                ColorTranslator.FromHtml("#00546C"),
                ColorTranslator.FromHtml("#518197"),
                ColorTranslator.FromHtml("#96898A"),
                ColorTranslator.FromHtml("#C0AFA5"),
                ColorTranslator.FromHtml("#D2C7C3"),
                ColorTranslator.FromHtml("#EDE6E0"),
                ColorTranslator.FromHtml("#BA9764"),
                ColorTranslator.FromHtml("#808080"),
                ColorTranslator.FromHtml("#D0D0D0")
            };

            ListLenght = ColorList.Count;
        }

        public Color GetNextColor
        {
            get
            {
                if (CurrentColorIndex < ListLenght)
                {
                    Color currentColor = ColorList[CurrentColorIndex];

                    // Increase the index for the next iteration
                    CurrentColorIndex += 1;
                    return currentColor;
                }

                CurrentColorIndex = 0;
                return ColorList[0];
            }
        }
    }
}

我遇到的问题是，有范围注入了这个对象，但范围不是每个组件，而是看起来像是一个 URL 对象，这导致类“ColorPaletteService”的函数“GetNextColor”传递了一种随机颜色而不是遵循变量“ColorList”的顺序。

有什么帮助吗？

Answer 1

您正试图在注入的服务实例中维护特定于组件的状态。相反，您应该维护组件内部的状态。 您的代码可能如下所示：

PieChart.razor

@code
{
   int currentColorIndex = 0;
   protected void PreparePointColor(ChartSeriesPointCustomizationSettings pointSettings)
    {
        currentColorIndex = colorPaletteService.GetNextColor(currentColorIndex, out var color);
        pointSettings.PointAppearance.Color = color;
    }
}

调色板服务为：

public int GetNextColor(int CurrentColorIndex, out Color col)
{
      col = CurrentColorIndex < ListLenght ? ColorList[CurrentColorIndex] : ColorList[0];
      return CurrentColorIndex >= ListLenght ? 0 : CurrentColorIndex+1;    
}

并将调色板服务设置为单例。 请注意，blazor 服务器中的瞬态定义不明确。只要会话未断开连接，服务器 WebSocket 就会使会话保持活动状态。所以这里的瞬态行为与传统的 .net 控制器不同。

Answer 2

该类应添加为 Transient：

services.AddTansient<IColorPaletteService, ColorPaletteService>();

这将为每个组件提供自己的实例。