javascript - 为什么我的 blazor.server.js 之后无法加载任何 js？

Question

所以我注意到在我的 _Host.cshtml 文件中，我在 </body> 之前有这个脚本。标签

 <script src="_framework/blazor.server.js"></script>

而且我还有一些脚本应该在这些脚本之后加载

    <script src="assets/plugins/jquery/jquery.min.js"></script>
    <script src="assets/plugins/jquery-ui/jquery-ui.js"></script>
    <script src="assets/plugins/popper/popper.js"></script>
    <script src="assets/plugins/feather/feather.min.js"></script>

    <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/plugins/typeahead/typeahead.js"></script>
    <script src="assets/plugins/typeahead/typeahead-active.js"></script>
    <script src="assets/plugins/pace/pace.min.js"></script>
    <script src="assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="assets/plugins/highlight/highlight.min.js"></script>

    <!-- Articles Script -->
    <script src="assets/plugins/dataTable/datatables.min.js"></script>
        <script src="assets/plugins/summernote/summernote.min.js"></script>
        <script src="assets/plugins/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>
    <!-- Required Script -->
    <script src="assets/js/app.js"></script>
    <script src="assets/js/avesta.js"></script>
    <script src="assets/js/avesta-customizer.js"></script>

</body>

但是，如果我在顶部有 blazor.js 脚本，我的菜单将无法正常运行，它将停止工作并看起来像这样。
我实际上点击了很多，但它并没有像你看到的那样动画。



但是，如果我将 blazor.server.js 脚本放在底部以最后加载，它工作得很好，看起来像这样



但是如果我最后加载它，我会在我的控制台中得到它



这导致我无法做到这一点

<input @bind="@CurrentValue" @oninput="@((e) => { CurrentValue=(string)e.Value;})" @onkeypress="KeyPress" class="form-control" type="text" placeholder="Search" aria-label="Search">

它根本没有命中该功能，没有任何 react ，它没有注册它。

Answer 1

使用 Net5，您现在可以通过覆盖 OnAfterRenderAsync 来引用主布局上的脚本.这是一个例子
您将首先继承 IJSRuntime

@inject IJSRuntime JSRuntime 

然后是代码:

@code {        
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender)
        {
            await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/assets/plugins/jquery/jquery.min.js");
        }
    }
}