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