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

【问题标题】：Blazor WebAssembly : Multiple route on same component renderingBlazor WebAssembly：同一组件渲染上的多个路由
【发布时间】：2020-05-28 05:18:53
【问题描述】：

我实际上是在试验 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 上有一些用于数据缓存的范围服务。

有人可以帮我吗？

【问题讨论】：

这似乎是一个老错误，请参阅：github.com/dotnet/aspnetcore/issues/9931 Blazor 在停留在同一页面时不会更新 Route 参数。您是否尝试在保存实体后手动设置Id？之后您可能还需要立即致电StateHasChanged()。
老bug一旦关闭然后重新打开，我可以看到...我按照你说的做了，手动设置Id，更改模型表单绑定到其他变量，然后调用StateHasChanged（）。它首先解决了创建项目后出现的问题。例如，在两条路线之间导航和视图未正确刷新的问题仍然存在。也许还有另一种方法可以获得相同的结果。如果没有，我将分开创建和编辑组件，直到错误得到解决。谢谢！

标签： c# asp.net blazor-client-side

【解决方案1】：

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

【讨论】：