如何防止 Blazor NavLink 组件的默认导航答案

【问题标题】：How to prevent default navigation for Blazor NavLink component如何防止 Blazor NavLink 组件的默认导航
【发布时间】：2020-03-12 11:35:00
【问题描述】：

从 Blazor 3.1 Preview 2 开始，应该可以使用 prevent default navigation behaviour 获取 Blazor 中的链接，也可以使用 discussed in this answer。

但是，这段代码：

<NavLink href="" Match="Match" @onclick:preventDefault @onclick="()=>LinkAction()" >
Do something
</NavLink>

给出这个错误：

组件参数“onclick”为此使用了两次或多次零件。参数必须是唯一的（不区分大小写）

这是为什么呢？

【问题讨论】：

标签： c# blazor

【解决方案1】：

虽然 HTML <A> 标记和 Blazor NavLink 组件的最终结果大致相同，但 @onclick:preventDefault 语法仅适用于 HTML 版本，不适用于 Blazor 组件。

史蒂夫·桑德森explains this here:

恐怕没有一种机制可以随意通过指令属性，例如 @*:preventDefault 作为组件参数，因此预计这不适用于 NavLink。

Steve 也给出了一个可能的解决方案：

但是，您可以从 NavLink 继承您自己的子类，从而添加 “防止默认”行为。例如，创建 NavLinkPreventDefault.razor，包含：
@inherits NavLink 
<a @attributes="@AdditionalAttributes" class="@CssClass" @onclick:preventDefault>
    @ChildContent 
</a> 
现在您可以使用而不是获取你想要的行为。

【讨论】：

这给了我我需要的东西。我只是将硬编码的 preventDefault 属性更改为一个参数，以便可以动态设置它：@inherits NavLink <a @attributes="@AdditionalAttributes" class="@CssClass" @onclick:preventDefault="OnClickPreventDefault">@ChildContent</a> @code { [Parameter] public bool OnClickPreventDefault { get; set; } }

【解决方案2】：

如果你删除参数href并设置@onclick，它会直接进入函数，你可以随心所欲：

<NavLink class="nav-link" Match="NavLinkMatch.Prefix" @onclick="() => SetToActive(item)">
    <span class="pcoded-micon">
        <b class="fa-custom fas fa-bars @item.Icon"></b>
    </span>
    <span class="pcoded-mtext">@item.Title</span>
</NavLink>

这将调用方法，您可以在那里调用路由：

private void SetToActive(CoolModel item)
{
    // do something...

    if (item.Route is not null)
    {
        _navigationManager.NavigateTo(item.Route);
    }
}

【讨论】：