Blazor：强制组件/页面生命周期答案

【问题标题】：Blazor: Forcing Component/Page Life-cycleBlazor：强制组件/页面生命周期
【发布时间】：2021-04-14 04:59:15
【问题描述】：

我正在使用 Blazor Web-assembly 构建应用程序，我希望用户能够通过路由加载应用程序，例如

http://www.someapp.com/{Page}/{Item}

如果用户选择上述路线，它应该转到 {Page} 并显示 {item}。
这是开箱即用的；但是，如果用户应用以下步骤：

在浏览器中，复制 + 粘贴 http://www.someapp.com/Inventory/1 //works
一种。 SetParametersAsync（已触发）
湾。 OnSetParameters（已触发）
下一步，将 URL 更改为 http://www.someapp.com/Inventory/2 //不起作用
一种。 SetParametersAsync （未触发）
湾。 OnSetParameters （未触发）

如果 {Page} 相同，即使路由也不会启动组件的生命周期参数变了。是什么赋予了？有办法强制吗？

环境：VS2019
.NET CORE：v3.1

【问题讨论】：

创建并发布minimal reproducible example。因为这不应该发生。您的问题出在其他地方。

标签： routes blazor lifecycle blazor-webassembly route-parameters

【解决方案1】：

这里有一些代码（基于 Counter 组件），复制并测试它。自己看看当你改变参数值时这两个方法都被执行了。

顺便说一句，是OnParametersSet，不是

OnSetParameters（未触发）

@page "/counter/{MyCount:int}"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;
    [Parameter]
    public int MyCount { get; set; }

    protected override void OnParametersSet()
    {
        Console.WriteLine("OnParametersSet");
    }

    public override async Task SetParametersAsync(ParameterView parameters)
    {
        Console.WriteLine("SetParametersAsync");
        await base.SetParametersAsync(parameters);
    }

    private void IncrementCount()
    {
        currentCount++;
    }
}

注意：由于 Blazor reuses 页面（当前为计数器）具有不同的参数；也就是说，它没有re-create Page 对象。这就是为什么像 OnInitialized[Async) 对这样的生命周期方法只在组件诞生时运行一次。

【讨论】：

【解决方案2】：

作为@enet 答案的附录。当我需要查看组件生命周期中发生了什么时，我会使用这段代码和标记：

@page "/lifecyclebar"

------  Your code

<div class="container m-2 px-3 p-t bg-dark text-white">
    <div class="row">
        <div class="col-3">
            Initialized: @this.InitRun
        </div>
        <div class="col-3">
            Set Params: @this.SetParamsAsync
        </div>
        <div class="col-3">
            Params Set: @this.ParamsSet
        </div>
        <div class="col-3">
            Rendered: @this.Rendered
        </div>
    </div>
</div>

@code {

---- your code

    private int SetParamsAsync = 0;
    private int InitRun = 0;
    private int ParamsSet = 0;
    private int Rendered = 1;

    //  add to existing method if you have one
    protected override Task OnInitializedAsync()
    {
        InitRun++;
        return base.OnInitializedAsync();
    }

    //  add to existing method if you have one
    protected override Task OnParametersSetAsync()
    {
        this.ParamsSet++;
        return base.OnParametersSetAsync();
    }

    //  add to existing method if you have one
    public override Task SetParametersAsync(ParameterView parameters)
    {
        this.SetParamsAsync++;
        return base.SetParametersAsync(parameters);
    }

    //  add to existing method if you have one
    protected override bool ShouldRender()
    {
        Rendered++;
        return true;
    }
}

【讨论】：

【解决方案3】：

我会尝试删除这个问题，但我的问题的解决方案是缓存策略。硬重新加载后，页面将按预期运行。感谢那些花时间帮助解决这个问题的人。

它确实有助于让代码“有效”（已发布）并在我的系统上尝试以帮助定位这个时间汇的来源。

【讨论】：