Razor 页面等待 Blazor 组件完成渲染的规范方法是什么？

Question

Razor 组件和页面都有OnAfterRender生命周期方法。当你<SomeComponent>的 中有 时index.razor，首先index.razor会OnAfterRender触发 ，然后SomeComponent.OnAfterRender再触发。

假设在razor页面上你需要做一些工作，但是只能在发生SomeComponent.OnAfterRender火灾之后才能做。这样做的适当方法是什么？

这可能很重要，因为组件的支持 HTML 在其OnAfterRender触发之前尚未准备好（可能不存在）。换句话说，剃刀页面作者如何知道其组件何时相当于 DOM 准备就绪？

Answer 1

您可以让您的子组件公开一个Action参数，该参数在渲染后执行，如下所示。

[Parameter]
public Action AfterRender { get; set; }

protected override OnAfterRender(bool firstRender)
{
  Action?.Invoke();
}

在父级中

<MyChild AfterRender=@SomeMethodInParentComponent/>

我建议Action不要这样做，EventCallback因为我怀疑可能会发生以下过​​程

1. 在 EventCallback 之后，Blazor 对被调用者（父级）调用 StateHasChanged
2. 父级重新渲染
3. 父级在子级上设置参数（AfterRender我们创建的参数）
4. 如果参数的任何状态发生变化，子级将重新渲染
5. 您的子组件的OnAfterRender方法将调用其AfterRender参数
6. 重复步骤1

使用 anAction代替 anEventCallback将避免这种情况。

但是，如果您要将其他参数值（可能会更改）从父级传递给子级，那么您应该使用 EventCallback。在这种情况下，您需要ShouldRender在子组件中进行重写，以便仅在其工作状态实际更改时才呈现。

您可以通过覆盖来检查状态是否已更改SetParametersAsync并执行类似的操作。

private bool NeedsRendering = true; // Always true for first render

protected override bool ShouldRender => NeedsRendering; // Render only if we say so

protected override void SetParameters(ParameterView parameters)
{
  string oldProperty1 = Property1;
  byte oldSomethingElse = SomethingElse;

  base.SetParameters(parameters);

  if (oldProperty1 != Property1 || oldSomethingElse != somethingElse)
  {
    NeedsRendering = true;
  }
}

protected override async Task OnAfterRenderAsync()
{
  NeedsRendering = false; // We are up to do, not more renders until state changes
  // Do your other stuff
  AfterRender?.Invoke();
}