[英]How can I save a Blazor Component instance in a variable and render it in my .cshtml
Considering I have a class called Tab
.考虑到我有一个名为Tab
的 class 。
public class Tab
{
public Guid Id { get; }
public bool IsVisible { get; set; }
protected Tab()
{
Id = Guid.NewGuid();
}
}
I want to strictly couple these tabs to a Blazor Component instance and render those instances by iterating over the tabs.我想将这些选项卡严格耦合到 Blazor 组件实例,并通过遍历选项卡来呈现这些实例。 I want to have control over when a Component is created and when it is destroyed again.我想控制何时创建组件以及何时再次销毁它。
I want to do this because that way I can persist the state for each component.我想这样做是因为这样我可以为每个组件保留 state 。
Here is the problem with the easy approach.这是简单方法的问题。 Considering something like this:考虑这样的事情:
@code {
public void CreateNewTabAndRemoveOldTab()
{
Tabs.RemoveAt(0);
Tabs.Add(new Tab());
}
}
foreach (var tab in Tabs)
{
<MyTabComponent/>
}
The newly created tab will simply take over the state of the removed tab.新创建的选项卡将简单地接管已删除选项卡的 state。 OnInitialized
will not be called. OnInitialized
不会被调用。
I have looked into RenderFragment
, but it does not look like its working property.我查看了RenderFragment
,但它看起来不像它的工作属性。 The problem is that the Blazor Framework will still decide when a new component is created (thus calling OnInitialized
) or when existing instance are used.问题是 Blazor 框架仍将决定何时创建新组件(因此调用OnInitialized
)或何时使用现有实例。
If I read this correctly, Tab is a class, not a component.如果我没看错的话,Tab 是 class,而不是组件。 You need to decouple your list of Tabs from the component that renders them.您需要将选项卡列表与呈现它们的组件分离。 Your list of tabs lives in a service, the scope depends on what you're doing with them.您的选项卡列表存在于服务中,scope 取决于您使用它们做什么。 Your Tab Component displays the currently selected Tab in the list.您的选项卡组件在列表中显示当前选定的选项卡。 If you show a little more of your logic I can probably show you a relevant working example.如果您展示更多的逻辑,我可能会向您展示一个相关的工作示例。
Check this检查这个
@ref it's reference to your component it's added to list of components. @ref 它是对您的组件的引用,它已添加到组件列表中。
@implements IDisposable
@foreach (var tab in tabs)
{
<MyTabComponent @ref=@TabRef Tab=@tab />
}
@code {
List<Tab> tabs = new List<Tab>();
List<MyTabComponent> tabsComp = new List<MyTabComponent>();
MyTabComponent TabRef {
set { tabsComp.Add(value); }
}
public void CreateNewTabAndRemoveOldTab()
{
tabs.RemoveAt(0);
tabs.Add(new Tab());
}
public void Dispose()
{
}
}
MyTabs.razor MyTabs.razor
<CascadingValue Value="@this" IsFixed="true">
foreach (var tab in Tabs)
{
<MyTabComponent/>
}
</CascadingValue>
@code{
private List<MyTabComponent> Tabs;
public void Register(MyTabComponent tab)
{
this.Tabs.Add(tab);
}
public void UnRegister(MyTabComponent tab)
{
this.Tabs.Remove(tab);
}
}
MyTabComponent.razor MyTabComponent.razor
@implements IDisposable
<div></div>
@code{
[CascadingParameter]
protected MyTabs Context { get; set; }
protected override void OnInitialized()
{
Context?.Register(this);
// implement your logic here
}
public void Dispose()
{
Context?.UnRegister(this);
// implement your logic here
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.