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];
            }
        }
    }
}

我的问题是，作用域注入了这个对象，但作用域并不是每个组件，而是看起来是一个对象，这导致类"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服务器中的瞬态定义不明确。只要没有断开连接，Server WebSocket就会使会话保持活动状态。因此，这里的瞬态行为与传统.net控制器中的不同。

Answer 2

这个类应该作为瞬态类添加：

services.AddTansient<IColorPaletteService, ColorPaletteService>();

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