Load Javascript Blazor компонент - PullRequest
Новая
       11

Load Javascript Blazor компонент

1 голос
/ 25 января 2020

Я пытаюсь преобразовать мой сайт .netcore в Blazor SPA .. 80% работы завершено. Моя кнопка «Нравится» / «Поделиться» в Facebook не отображается на странице .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 выполняется до того, как содержимое блазора отображается на DOM. Есть ли способ связать компонент javascript только с этим компонентом, чтобы, когда мой компонент facebook отображался, работал только Facebook javascript?

1 Ответ

1 голос
/ 25 января 2020

Вы можете использовать вызов JSInterop из метода OnAfterRenderAsyn c, например: 

 @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);
        }

    }
}

Примечание. Для выполнения вызовов JSInterop необходимо внедрить объект JSRuntime.

Вы должны вызвать свой код JavaScript после того, как ваши компоненты были обработаны. Метод OnAfterRenderAsyn c вызывается после визуализации компонента, и, таким образом, вы можете разместить здесь код для инициализации вашего компонента. Это должно быть, когда firstRender имеет значение true, и множественные вызовы ваших JavaScript объектов, когда firstRender - false.

Поместите сценарий в конец файла _Host.cs html, чуть ниже 

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

Обратите внимание, что параметр с именем element , который принимает функция, является объектом-элементом, поскольку мы определили аргумент как ElementReference в Blazor. Конечно, вы могли бы передать идентификатор элемента.

...