更改查询字符串值时未调用 OnInitializedAsync 方法

Question

我正在开发 Blazor 服务器端应用程序，并且有一个 header 绑定了动态菜单。还有一个类别页面，我在其中根据已在 header 菜单中绑定的查询字符串显示数据。

一旦我 select 菜单和类别页面显示代表查询字符串值的数据，就会调用 OnInitializedAsync 方法，但我再次打开菜单并 select 访问不同的产品和类别页面没有被调用。

在 header 菜单的代码下方。

Header.razor（这是在主布局页面上注册的）

<ul class="cat_menu">
    @if (categoryDtos == null)
    {
         <div>Loading...</div>
    }
    else
    {
         @foreach (var category in categoryDtos)
         {
          <li><a href="category/@category.Id">@category.Name<i class="fas fa-chevron-right"></i></a></li>
          }
   }
</ul>

 public class HeaderBase : ComponentBase
{
    [Inject] public IToastService toastService { get; set; }

    [Inject] ICategoryService categoryService { get; set; }

    public List<CategoryDto> categoryDtos { get; set; }

    protected async override Task OnInitializedAsync()
    {
        var categoryLIst = await categoryService.GetCategories();

        if (categoryLIst.Data != null)
        {
            categoryDtos = categoryLIst.Data.ToList();
            toastService.ShowSuccess("Fetch successfully");
        }
        else
        {
            toastService.ShowError(categoryLIst.Message);
        }
    }

    
}

Product.razor 页

 @page "/category/{categoryID}"

   <ul class="sidebar_categories">

                        @if (categoryTypeDtos == null)
                        {
                            <div>Loading...</div>
                        }
                        else
                        {
                            @foreach (var category in categoryTypeDtos)
                            {
                                <li><a href="#">@category.Name</a></li>
                            }
                        }
                    </ul>

 public class CategoryBase : ComponentBase
{
    [Inject] public IToastService toastService { get; set; }
    [Parameter] public string categoryID { get; set; }

    [Inject] ICategoryService categoryService { get; set; }

    public List<CategoryTypeDto> categoryTypeDtos { get; set; }

    protected async override Task OnInitializedAsync()
    {

        var response = await categoryService.GetCategoryTypeByID(Guid.Parse(categoryID));
        if (response.Data != null)
        {
            categoryTypeDtos = response.Data.ToList();
            toastService.ShowSuccess("Fetch successfully");
        }
        else
        {
            toastService.ShowError(response.Message);
        }
    }
}

Answer 1

OnInitialized 仅在首次创建组件或页面时调用。

呈现相同组件的新 url 将使用该实例。您需要改为使用 OnParametersSetAsync。

更改查询字符串值时未调用 OnInitializedAsync 方法

OnInitializedAsync method is not getting call while changing the query string value

blazor

blazor-server-side

blazor-webassembly