मैं अपनी .netcore वेबसाइट को Blazor SPA में बदलने की कोशिश कर रहा हूँ।.८०% काम पूरा हो गया है। मेरा फेसबुक लाइक/शेयर बटन .razor पेज के माध्यम से प्रदर्शित नहीं हो रहा है। मैंने अपने .razor पेज में index.html और facebook "Div" में फेसबुक जावास्क्रिप्ट को नीचे रखा है।

<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>

मुझे लगता है कि समस्या डीओएम पर ब्लेज़र सामग्री प्रस्तुत करने से पहले फेसबुक जावास्क्रिप्ट निष्पादित है। क्या उस घटक के साथ घटक जावास्क्रिप्ट को बाध्य करने का कोई तरीका है, इसलिए जब मेरा फेसबुक घटक प्रदर्शित होगा तो केवल फेसबुक जावास्क्रिप्ट ही चलेगा?

4
Pankaj Rawat 25 जिंदा 2020, 20:17

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

    }
}

नोट: JSInterop कॉल निष्पादित करने के लिए आपको JSRuntime ऑब्जेक्ट को इंजेक्ट करने की आवश्यकता है।

आपके घटकों को प्रस्तुत किए जाने के बाद आपको अपना जावास्क्रिप्ट कोड कॉल करना होगा। घटक को प्रस्तुत करने के बाद OnAfterRenderAsync विधि को कॉल किया जाता है, और इस प्रकार आप अपने घटक को प्रारंभ करने के लिए यहां कोड डाल सकते हैं। यह तब होना चाहिए जब firstRender सत्य हो, और आपके JavaScript ऑब्जेक्ट पर एकाधिक कॉल, जब firstRender गलत हो।

अपनी स्क्रिप्ट को _Host.cshtml फ़ाइल के नीचे, ठीक नीचे रखें

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

ध्यान दें कि element नाम का पैरामीटर जो फ़ंक्शन लेता है वह एक एलिमेंट ऑब्जेक्ट है क्योंकि हमने तर्क को Blazor में ElementReference के रूप में परिभाषित किया है। बेशक, आप एलिमेंट आईडी पास कर सकते थे।

5
enet 25 जिंदा 2020, 18:15