Blazor 组件中的 JavaScript 文件存在问题

Question

我在 Blazor 组件（Blazor 服务器和 .net 6）中使用 JavaScript 文件。 如下：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await jsRuntime.InvokeAsync<IJSObjectReference>("import", "/css/template/vendor/libs/bs-stepper/bs-stepper.js");
    }
}

第一次加载页面时一切正常，但是当我使用导航更改页面并进入另一个页面（组件）然后再次返回与上一页相同时，无法使用 JavaScript 代码。

这个问题的原因是什么？

Answer 1

这是在 blazor 应用程序中使用 javascript 库的方法。

在index.html （或_Layout.cshtml ）的body元素末尾添加库的脚本

<body>
    ...
    <script src="css/template/vendor/libs/bs-stepper/bs-stepper.js"></script>
    ...
</body>

和head元素末端的 css

<head>
    ...
    <link rel="stylesheet" href="css/template/vendor/libs/bs-stepper/bs-stepper.min.css">
    ...
</head>

在路径wwwroot/js中创建一个名为stepperInteropHelper.js的 js 文件，并在其中添加此 function：

export function initStepper() {
    new Stepper(document.querySelector('.bs-stepper'));
}

最后在使用步进器的组件中：

@inject IJSRuntime jsRuntime

<div class="bs-stepper">
    ...
</div>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // import stepperInteropHelper.js module
            IJSObjectReference module = await jsRuntime.InvokeAsync<IJSObjectReference>(
                "import", "./js/stepperInteropHelper.js");

            // call initStepper method from stepperInteropHelper.js
            await module.InvokeVoidAsync("initStepper");
        }
    }
}

Blazor 组件中的 JavaScript 文件存在问题

问题描述

1 个解决方案

解决方案1
0 2022-08-31 20:05:18

Blazor 组件中的 JavaScript 文件存在问题

问题描述

1 个解决方案

解决方案1 0 2022-08-31 20:05:18

解决方案1
0 2022-08-31 20:05:18