如何在托管的 wasm 应用程序中动态更改应用程序基本路径？

Question

在 WASM 托管项目中，我想动态更改应用程序基本路径：给定一个 appSettings.json 配置文件，我想将与给定键关联的值存储在变量中，并设置包含此变量内容的 <base href="..."/> 标签。

目前，我无法执行此操作，因为在 HTML 文件中我无法获取配置参数。所以我看到了一些方法：

使用javascript
将 index.html（包含 base 标签的文件）更改为 razor 文件

我在 google 上搜索并会继续，但如果有人能给我关于如何继续的建议，那就太好了。

Answer 1

将 JS 文件添加到客户端应用程序。

site.js


window.SetBaseHref = function (elementId, hRef) {
    var link = document.getElementById(elementId);
    if (link !== undefined) {
        link.href = hRef;
    }
    return true;
}

wwwroot/appsettings.json

{
  "Configuration": {
    "BaseHRef": "/blue"
  }
}

在 index.html 中引用它并在 <base> 上创建一个 id。

    <base href="~/" id="BlazorHRef" />

.......

    <script src="/site.js"></script>

索引页中的演示

@page "/"
@page "/red/"

<h1>Hello, world!</h1>

    Welcome to your new app.

<button type="button" @onclick="this.SetBaseHRef">SetHRef</button>

<SurveyPrompt Title="How is Blazor working for you?" />
@code {

    [Inject] private IJSRuntime _js { get; set; }

    private bool _isAltHRef;

    private string _altHRef => _isAltHRef ? "/" : "/red";

    public async Task SetBaseHRef()
    {
        await this.SetBaseHref("BlazorHRef", _altHRef);
        _isAltHRef = !_isAltHRef;
    }

    public ValueTask<bool> SetBaseHref(string elementId, string hRef)
      => _js.InvokeAsync<bool>("SetBaseHref", elementId, hRef);

}

启动时设置 App.razor

<Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

@code {
    [Inject] IConfiguration Configuration { get; set; }

    [Inject] private IJSRuntime _js { get; set; }

    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        var baseHRef = Configuration.GetValue<string>("Configuration:BaseHRef");
        if (!string.IsNullOrEmpty(baseHRef)) await this.SetBaseHref("BlazorHRef", baseHRef);
    }

    public ValueTask<bool> SetBaseHref(string elementId, string hRef)
          => _js.InvokeAsync<bool>("SetBaseHref", elementId, hRef);

}

您可以用类似的方式更改 header 中的大部分内容。

如何在托管的 wasm 应用程序中动态更改应用程序基本路径？

How to dynamically change app base path in a hosted wasm app?

html

.net-5

blazor-webassembly

索引页中的演示

启动时设置 App.razor