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 以查看是否重要。 從我在谷歌上看到的，這應該有效。 誰能發現我缺少的東西？ 提前致謝。

傑森

Answer 1

我相信當你回去你的組件重新初始化並重置 B 的值時，你應該使用 LocalStorage 或 SessionStorage 來存儲 B 的值並使用 get, set 這些存儲的方法來更新和使用它的值。 文檔

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
}