如何在 blazor 组件中设置 href？

Question

我正在尝试设置一个导航，其中链接由

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>

Answer 1

您不需要任何 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");
    }
}