Blazor C# 为什么路由参数总是 0 或 Null？

Question

我有以下代码：

@using Maelstrom.UI.Web.Shared.Widgets
@using Maelstrom.UI.Web.Shared.Utility

@page "/backlog/{B}"


<ServiceItemWidget>
    <ServiceItemHeaderTemplate>
        <ServiceItemHeaderWidget ServiceItemIdentifier="@B" ServiceItemName="Test Backlog"/>
    </ServiceItemHeaderTemplate>
    <ServiceItemMenuTemplate>
        <ServiceMenuWidget Choices="_choices"/>
    </ServiceItemMenuTemplate>
    <ServiceItemContentTemplate>
        <Switch>
            <Route Template="@GetBacklogTemplate("Dashboard")">
                <BacklogItemDashboard/>
            </Route>
            <Route Template="@GetBacklogTemplate("Profile")">
                <BacklogItemProfile/>
            </Route>
            <Route Template="@GetBacklogTemplate("UserStories")">
                <BacklogItemUserStories/>
            </Route>
            <Route Template="@GetBacklogTemplate("Discussion")">
                <BacklogItemDiscussion/>
            </Route>
            <Route Template="@GetBacklogTemplate("Communication")">
                <BacklogItemCommunication/>
            </Route>
        </Switch>
    </ServiceItemContentTemplate>
</ServiceItemWidget>

@code
{
    [Parameter]
    public string B { get; set; }

    private static int _backlogId;

    protected override async Task OnInitializedAsync()
    {
        //_backlogId = B;
        //_backlogId = 1;
    }

    private string GetBacklogTemplate(string page)
    {
        var href = string.Empty;

        switch (page)
        {
            case "Dashboard":
                href = $@"/backlog/{_backlogId}/dashboard";
                break;
            case "Profile":
                href = $@"/backlog/{_backlogId}/profile";
                break;
            case "UserStories":
                href = $@"/backlog/{_backlogId}/userstories";
                break;
            case "Discussion":
                href = $@"/backlog/{_backlogId}/discussion";
                break;
            case "Communication":
                href = $@"/backlog/{_backlogId}/communication";
                break;
        }

        return href;
    }

    private readonly List<MenuChoice> _choices = new()
    {
        new MenuChoice()
        {
            To = $"/backlog/{_backlogId}/dashboard",
            Caption = "Dashboard"
        },
        new MenuChoice()
        {
            To = $"/backlog/{_backlogId}/profile",
            Caption = "Profile"
        },
        new MenuChoice()
        {
            To = $"/backlog/{_backlogId}/userstories",
            Caption = "User Stories"
        },
        new MenuChoice()
        {
            To = $"/backlog/{_backlogId}/discussion",
            Caption = "Discussion"
        },
        new MenuChoice()
        {
            To = $"/backlog/{_backlogId}/communication",
            Caption = "Communication"
        }
    };
}

问题是，当我转到 /backlog/1 时，例如参数 B 始终为 0 或 null。我试过将它声明为 int 和 string 以查看是否重要。从我在 Google 上看到的情况来看，这应该可行。谁能发现我遗漏的东西？提前致谢。

贾森

Answer 1

我相信当你返回你的组件re-initializes并重置B的值时，你应该使用LocalStorage或SessionStorage来存储B的值并使用这些存储的get，set方法更新和使用它的价值。 docs

Answer 2

答案就在这里：

https://github.com/hez2010/BlazorRouter/blob/master/BlazorRouter.Sample/Pages/Counter.razor

<h1>Counter</h1>

<p>Current count: @CurrentCount</p>

<button class="btn btn-primary" @onclick="() => ChangeCount(CurrentCount + 1)">Click me</button>

@code {
    [Parameter] public int CurrentCount { get; set; } = 0;
    [Parameter] public EventCallback<int> CurrentCountChanged { get; set; }
    [Parameter] public Action<int> ChangeCount { get; set; }
    [CascadingParameter(Name = "RouteParameters")] IDictionary<string, object> parameters { get; set; }
    private bool parameterHasSet = false;

    protected override Task OnParametersSetAsync()
    {
        if (parameterHasSet) return Task.CompletedTask;
        parameterHasSet = true;
        base.OnParametersSetAsync();
        if (parameters != null)
        {
            CurrentCount = (int)parameters["init"];
            ChangeCount(CurrentCount);
        }
        return Task.CompletedTask;
    }
}

Answer 3

B 总是 null 还是 0？

也许您可以尝试在 InitializeAsync 上检查它是否为空，因为有时界面构建速度比 OnInitializedAsync

@code{
private bool dataFetch {get;set;}


   protected override async Task OnInitializedAsync()
   {
      while(!String.IsNullOrEmpty(B))
           dataFetch = true; //try to log the b if has value
   }
}

然后在您的标记中

@if(dataFetch)
{
  <ServiceItemWidget>
     ........
}else{
 //progress
}

Blazor C# 为什么路由参数总是 0 或 Null？

Blazor C# Why is Route Parameter Always 0 or Null?

c#

blazor

blazor-webassembly