如何使用同一 Blazor 组件的多个实例

Posted 2023-02-15

【中文标题】如何使用同一 Blazor 组件的多个实例

【英文标题】：How to use multiple instances of the same Blazor component

【发布时间】：2021-03-31 11:06:01

【问题描述】：

我有一个选项卡控件，并在每个选项卡上动态创建具有相同组件（例如员工）的选项卡。创建第一个时，构造函数和 OnInitialized 执行。但是当我创建另一个（比如为另一个员工）时，构造函数和 OnInitialized 不会执行。 （OnParametersSetAsync 每次运行多次）。

最初我在 OnInitialized 中检索了员工信息。我理解这是首选做法。但由于它不适用于第二个员工，我不知道在哪里检索第二个员工信息。我没有看到 OnParametersSetAsync 的可预测行为。

如果有一个事件在这种情况下总是运行一次，那么这可能会起作用。有什么想法吗？

【问题讨论】：

您好，欢迎您。如果您提供代码示例，我认为您将有更好的机会获得帮助。

“如果有一个事件在这种情况下总是运行一次，那么这可能会奏效。有什么想法吗？”解决问题的方向不对。请发布问题的完整可重现代码。

这是我的例子

我将 BlazorStrap 用于选项卡，但我认为这并不重要。如果您查看此处的第一个示例：github.com/chanan/BlazorStrap/issues/407 您将在页面中间看到一个 StrategyComp 组件。如果其中有多个，则构造函数和 OnInitialized 仅针对第一个运行。

如果您发布一些代码，可能会更容易提供帮助。

【参考方案1】：

我认为您正试图强制 blazor 重新初始化组件。

实现这一点的一种方法是使用@key 属性。

如果您将组件设置为 <EmployeeComponent @key=”@Employee.Id”，则每次更改员工并且父组件重新渲染时，blazor diff 算法将被欺骗创建新的 EmployeeComponent，而不是重新渲染旧的。

如果没有您的代码示例，很难说它是否是该技术的正确用例。您的问题可能会有更优雅的解决方案。

【讨论】：

是的，这正是我所需要的。我在 BlazorStrap 选项卡的另一个地方使用了 @key 属性，但我并不真正了解它的影响。 （并花了很多时间试图弄清楚这一点）。谢谢！

很高兴听到这个消息！不要忘记接受答案。