Blazor WebAssembly:同一组件渲染上的多条路线

朱利安·古洛特

我实际上是在尝试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()方法。我不想用相同的代码分隔两个组件,也不想再次强制加载,因为我在IoC上有一些作用域服务用于数据缓存。

有人能帮我吗 ?

奥列克桑德尔

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Blazor WebAssembly + Amazon Cognito

来自分类Dev

无法调试Blazor Webassembly

来自分类Dev

Blazor HTML渲染问题

来自分类Dev

加载Javascript Blazor组件

来自分类Dev

动态附加blazor组件

来自分类Dev

Blazor组件未刷新

来自分类Dev

Blazor 3.1组件标签助手参数

来自分类Dev

Blazor Webassembly中的父组件未更新

来自分类Dev

Blazor WebAssembly Azure广告验证

来自分类Dev

具有AzureAD的Blazor WebAssembly

来自分类Dev

在同一组件中映射和渲染两个不同的数组-React

来自分类Dev

Blazor验证子组件列表

来自分类Dev

Blazor组件中的事件绑定

来自分类Dev

实现接口的Blazor组件列表

来自分类Dev

Blazor共享组件未呈现

来自分类Dev

子组件blazor的绑定按钮

来自分类Dev

Blazor验证子组件列表

来自分类Dev

在同一组件中从组件调用方法

来自分类Dev

NET 5.0中的Blazor WebAssembly App渲染人鱼图

来自分类Dev

如何在blazor中使用select2组件?

来自分类Dev

如何从同一组件分派多个动作?

来自分类Dev

Azure StorageAccount中的Blazor WebAssembly代码

来自分类Dev

如何访问blazor webassembly中的appsettings

来自分类Dev

无法连接Blazor Webassembly中的SignalR

来自分类Dev

Blazor Webassembly:检测用户来自哪个站点

来自分类Dev

Blazor WebAssembly中的本地化

来自分类Dev

Blazor WebAssembly:不支持提供的ContentType。

来自分类Dev

Blazor Webassembly-IdentityServer EventSink和HttpContext

来自分类Dev

Blazor Webassembly身份验证事件