c# - Blazor WebAssembly : Multiple route on same component rendering

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

然后像这样使用到 View 中

@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 和显示的“编辑”按钮。然后，如果我们单击“编辑”按钮，则可以编辑表单上的元素。 “编辑”按钮变为“保存”。然后将数据发送到 API。

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

问题如下:

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

有人可以帮助我吗？

Answer 1

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