RazorComponent在Blazor中多次包含在同一页面共享代码

Question

我有一个RazorComponent，名为"MyComponent"；我已经包含在下面代码中描述的另一个RazorComponent中。

@foreach (var MyComponentConfig in MyComponentsConfig.GetChildren())
{
<MyComponent Session="@GetSessionService(MyComponentConfig.Key)"></MyComponent>
}

我原以为这会在循环的每次迭代中创建一个单独的MyComponent实例，但代码似乎是以某种方式共享的。"；OnInitialize"；函数在MyComponent中只调用一次，即使循环中有5次迭代。如何创建MyComponent的单独实例而不是共享实例？

Answer 1

我原以为这会在循环的每次迭代中创建一个单独的MyComponent实例，但代码似乎是以某种方式共享的。"；OnInitialize"；函数在MyComponent中只调用一次，即使循环中有5次迭代。

你错了。试试这个代码：

MyComponent.cs

<h3>MyComponent</h3>
@code {        
protected override void OnInitialized()
{
Console.WriteLine("OnInitialized: {0}", ID.ToString());
}
[Parameter]
public int ID { get; set; }
}

家长

@page "/"
@for( var count = 1; count < 5; count++)
{
<MyComponent ID="@count"/>
}
@code
{
protected override void OnInitialized()
{
Console.WriteLine("Parent component initialized");
}
}

结果：

父组件已初始化

OnInitialized:1

OnInitialized:2

OnInitialized:3

OnInitialized:4

注意：将@key指令属性附加到MyComponent组件是一个好主意，比如这个

<MyComponent @key="MyComponentConfig" Session="@GetSessionService(MyComponentConfig.Key)"></MyComponent>

只要@key指令是唯一的，就可以为其指定任何所需的值。在我的代码示例中，你可以这样做：

<MyComponent  @key="@count" ID="@count"/>

点击此处阅读更多