组件后初始化 CascadingParameter 的 Blazor 布局

Question

有没有办法强制 Blazor 布局在其组件之前初始化？我发现它并不总是一致的，具体取决于访问页面的方式/时间。当我在组件所依赖的 Layout 中定义 CascadingParameter 时，它会导致问题。

组件设置：

@page "/parent1/parent2/parent3/things/1/details"
@layout MyLayout

// show thing here

@code
{
    [CascadingParameter] public object Thing { get; set; } // can be null

    protected override void OnInitialized() 
    {
        // this may occur before or after the layout is initialized

        // do something with Thing
    }
}

布局设置：

@inherits LayoutBase

@if (thing is not null) {
    <CascadingValue Value="@thing" IsFixed="true">
        @Body
    </CascadingValue>
}

@code {
    object thing;

    protected override void OnInitialized() 
    {
       // this may occur before or after the component is initialized
       thing = GetThingFromDatabase();

       // validate thing here
    }
}

我认为布局将是保护/验证/授权路由参数然后为任何子页面存储对象的最佳位置，但如果时间是随机的，则不起作用。例如，我追求的页面结构如下。

/things/1  (layout/abstract page)
   /things/1/details  (page using layout)
   /things/1/otherStuff  (page using layout)
   /things/1/moreStuff  (page using layout)

我只想加载一次，并在子页面之间导航时保​​留它。

Answer 1

有没有办法强制 Blazor 布局在其组件之前初始化？

您，程序员，无法控制组件实例化。这一切都由渲染器处理。

我只想加载一次并在子页面之间导航时保​​留它？

使用 Scoped Service 获取并持有事物 - ThingService - 并将其注入到任何需要它的组件中。

下面是一些示例代码：

首先是服务。注册为范围服务。

namespace StackOverflow.Server
{
    public class Thing
    {
        public string? ThisThing { get; set; }
        public bool Loading => this.ThisThing is null;

        public async Task GetThing()
        {
            // Emulated a real async database operation
            await Task.Delay(500);
            this.ThisThing = "Successful Database get";
        }
    }
}

演示级联的组件。

<h3>ShowThing Component</h3>
<div class="m-3">
Thing: @thing!.ThisThing
</div>

@code {
    [CascadingParameter] private Thing? thing { get; set; }
}

一个测试页面：

@page "/"
<CascadingValue Value=Thing>
    <ShowThing />
</CascadingValue>

<div class="m-3">
Thing: @this.Thing.ThisThing
</div>

@code {
    [Inject] Thing? Thing { get; set; }

    protected async  override Task OnInitializedAsync()
    {
        await Thing!.GetThing();
    }
}

请注意，如果 thing 不是 null，则无需测试。我已经删除了IsFixed，你不需要它。级联处理空值。当Thing 在OnInitializedAsync 中获得实际值时，OnInitializedAsync 后的渲染事件会检测到Thing 中的更改，并通过在这些组件上调用SetParametersAsync 将更改传递给为级联注册的任何组件，从而触发组件渲染。