主页 / coding / 问题 / 78443328
Accepted
KidBilly
Asked: 2024-05-07 22:45:30 +0800 CST

如何在 blazor 组件中设置 href？

  • 772

我正在尝试设置一个导航，其中链接是按appsettings.json值设置的。也许有更好的方法可以在没有 JavaScript 的情况下做到这一点？

这是我的组件，名为Navigation.razor

@inject IConfiguration Configuration
@inject IJSRuntime JSRuntime

<a id="test-link">Test</a>

<script>
    function SetNavlinks(url){
        var a = document.getElementById('test-link')
        a.setAttribute("href", url);
    }
</script>

@code{
    protected override async Task OnInitializedAsync()
    {       
        await InitializeNavigation();
        InvokeAsync(StateHasChanged);
    }

    Task InitializeNavigation(){
        var testLinkURL = Configuration.GetValue<string>("ContentURLs:Values:TestLink");
        JSRuntime.InvokeVoidAsync("SetNavlinks", testLinkURL);
        return Task.CompletedTask;
    }
}

问题是页面加载后 DOM 看起来像这样：

<a id="test-link">Test</a>

但如果document.getElementById('test-link')在开发控制台中使用，它会显示：

<a href="https://itworks.com" id="test-link">Test</a>
c#

1 个回答

  1. Best Answer

    您不需要任何 JavaScript 来完成此任务。您可以在初始化时设置 url 的值。

    <a href="@_url" id="test-link">Test</a>

    @code{
    private string _url;

    protected override void OnInitialized()
    {       
        _url = Configuration.GetValue<string>("ContentURLs:Values:TestLink");
    }
}
    • 1

相关问题