加载 Javascript Blazor 组件

Question

我正在尝试将我的 .netcore 网站转换为 Blazor SPA..80% 的工作已完成。我的 Facebook Like/Share 按钮没有通过 .razor 页面显示。我将 facebook javascript 放在 index.html 和 facebook "Div" 下，放在我的 .razor 页面中。

<script>
    (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10&appId=00000000000000';
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

我认为问题是 Facebook javascript 在 blazor 内容呈现在 DOM 上之前执行。有什么方法可以将组件 javascript 与该组件绑定，以便当我的 facebook 组件显示时，只有 facebook javascript 会运行？

Answer 1

您可以使用 OnAfterRenderAsync 方法中的 JSInterop 调用，如下所示：

 @page "/"
 @inject IJSRuntime jsRuntime

 <h1 id="myid" @ref=MyElementReference>Hello, world!</h1>


@code{
    ElementReference MyElementReference;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeAsync<object>("MyJSMethods.myMethod", MyElementReference);
        }

    }
}

注意：您需要注入 JSRuntime 对象才能执行 JSInterop 调用。

你必须在你的组件被渲染后调用你的 JavaScript 代码。OnAfterRenderAsync 方法在组件渲染后调用，因此您可以在此处放置代码来初始化您的组件。这应该是当 firstRender 为 true 时，并且当 firstRender 为 false 时多次调用您的 JavaScript 对象。

将您的脚本放在 _Host.cshtml 文件的底部，就在下面

<script src="_framework/blazor.server.js"></script>
<script>
        window.MyJSMethods =
        {
            myMethod: function (element) {
                window.alert(element.id);
            }
        };
    </script>

请注意，函数采用的名为element的参数是一个元素对象，因为我们在 Blazor 中将参数定义为 ElementReference。当然，您可以传递元素 id。