Blazor WebAssembly：同一组件渲染上的多个路由

Question

我实际上是在试验 Blazor WebAssembly。

除一件事外一切正常。

我想共享相同的组件来创建或编辑项目。

组件的名称是CreateOrEdit.razor，我有两条路线：

@page "/master/maker/create"
@page "/master/maker/{id:int}"

Id 被捕获并存储在属性 :

[Parameter]
public int Id { get; set; }

我还有一个 getter 属性来确定我们是在编辑还是创建页面。

public bool IsEditPage { get => Id > 0; }

并像这样用于视图

@if (IsEditPage)
{
    <Button Clicked="OnEditButtonClicked"
            Color="@(m_EditMode ? Color.Danger : Color.Primary)" Class="mb-2">
        @(m_EditMode ? "Save" : "Edit")
    </Button>
    <Row>
        <Column ColumnSize=" ColumnSize.Is2" Class="my-auto">
            <span>ID</span>
        </Column>
        <Column ColumnSize="ColumnSize.Is8">
            <span>@Id</span>
        </Column>
        <Column ColumnSize="ColumnSize.Is2"></Column>
    </Row>
}
else
{
    <Button Clicked="OnCreateButtonClicked" Color="Color.Danger" Class="mb-2">Create</Button>
}

如果我们处于编辑模式，我们会得到项目的 ID 并显示 "Edit" 按钮。然后，如果我们单击 "Edit" 按钮，则可以编辑表单上的元素。 "Edit" 按钮变为 "Save"。然后数据被发送到API.

在创建模式下，显示 "Save" 按钮。只需单击它即可将数据发送到 API。我打算添加验证，但问题不在这里。

下面的问题:

假设我们首先导航到编辑页面 "localhost/master/maker/1" 然后我们导航到创建页面 "localhost/master/maker/create" （如果我们创建一个项目然后重定向到编辑页面问题是一样的）；该组件不会重新渲染，因为它共享同一个组件。此外，不会再次调用 OnInitializedAsync() 方法。我不想用相同的代码分隔 2 个组件，也不想再次强制加载，因为我在 IoC 上有一些范围内的服务用于数据缓存。

有人可以帮助我吗？

Answer 1

这不是错误。 OnInitialized/OnInitializedAsync 被调用一次，因为组件被重用，而不是再次创建。要初始化参数，您应该使用 OnParametersSet/OnParametersSetAsync。每次在渲染组件之前调用这些。它在微软文档 [1] 中有描述：https://docs.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-3.1

Blazor WebAssembly：同一组件渲染上的多个路由

Blazor WebAssembly : Multiple route on same component rendering

c#

asp.net

blazor-client-side