如何解决Blazor 选项卡不起作用 - 出现 WASM 错误:RuntimeError:函数签名不匹配
所以,我一直在关注本教程来制作选项卡式组件:
https://blazor-university.com/templating-components-with-renderfragements/creating-a-tabcontrol/
标签:
<CascadingValue Value="this" IsFixed="true">
<div class="">
@foreach(var panel in Panels)
{
if(panel.TabName == ActiveTab.TabName)
{
<Button Type="ButtonTypes.Contained" Color="ButtonColors.Primary" OnClick="() => { ActivatePanel(panel); }">@panel.TabName</Button>
}
else
{
<Button Type="ButtonTypes.Outlined" Color="ButtonColors.Primary" OnClick="() => { ActivatePanel(panel); }">@panel.TabName</Button>
}
}
</div>
<div class="bg-white rounded-lg shadow-lg border @CssClass">
@ChildContent
</div>
</CascadingValue>
@code {
[Parameter]
public RenderFragment? ChildContent { get; set; }
[Parameter]
public string CssClass { get; set; } = "";
public TabPanel ActiveTab { get; set; } = new TabPanel();
private List<TabPanel> Panels { get; set; } = new List<TabPanel>();
internal void AddPage(TabPanel tabPage)
{
Panels.Add(tabPage);
if (Panels.Count == 1)
ActiveTab = tabPage;
StateHasChanged();
}
void ActivatePanel(TabPanel page)
{
ActiveTab = page;
}
}
面板:
@if(Parent.ActiveTab == this)
{
@ChildContent
}
@code {
[CascadingParameter]
private Tabs Parent { get; set; } = new Tabs();
[Parameter]
public RenderFragment? ChildContent { get; set; }
[Parameter]
public string CssClass { get; set; } = "";
[Parameter]
public string TabName { get; set; } = "";
protected override void OnInitialized()
{
if(Parent == null)
throw new ArgumentNullException(nameof(Parent),"TabPanel must exist within a Tabs component");
base.OnInitialized();
Parent.AddPage(this);
}
}
它的用法是这样的:
<Tabs>
<TabPanel TabName="Tab One">
<Header HeaderType="HeaderTypes.H3">One</Header>
</TabPanel>
<TabPanel TabName="Tab Two">
<Header HeaderType="HeaderTypes.H3">Two</Header>
</TabPanel>
<TabPanel TabName="Tab Three">
<Header HeaderType="HeaderTypes.H3">Three</Header>
</TabPanel>
</Tabs>
有谁知道为什么会发生这种情况或者我该如何调试它?
解决方法
我无法解释这个特定错误的确切原因,但这一行导致了问题:
public TabPanel ActiveTab { get; set; } = new TabPanel();
您不应该像这里那样通过调用构造函数来创建组件。此外,这一行没有完成任何有用的事情,因为您在添加第一个选项卡时已经将 ActiveTab
初始化为非空值。
只需将此行更改为:
public TabPanel ActiveTab { get; set; }
你的问题就会消失。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。