कोणीय 2 कॉल बाहरी जेएस फ़ाइल फंक्शन घटक के अंदर

Question

क्षमा करें दोस्तों अगर यह प्रश्न डुप्लिकेट है। मैं अभी भी वेब पर कोई उचित समाधान नहीं ढूंढ पाया, इसलिए मैं यहां पोस्ट कर रहा हूं।

मैं कोणीय 2 में एक घटक बना रहा हूं। मेरे पास बाहरी जेएस फ़ाइल है और इसे गतिशील रूप से लोड कर रहा है। बाहरी जेएस फ़ाइल में, मेरे पास पैरामीटर के साथ एक फ़ंक्शन है। मैं उस पैरामीटर को ngAfterViewInit के अंदर कैसे कॉल कर सकता हूं। मैं कोणीय 2 करने के लिए नया हूँ, तो कैसे कोणीय 2 टाइपप्रति में js समारोह कॉल करने के लिए पता नहीं है, मैं आपके संदर्भ के लिए मेरी कोड पोस्ट करेंगे

app.component.ts

import { Component, OnInit, ElementRef,AfterViewInit } from '@angular/core'; 
declare var $:any; 
@Component({ 
    selector: 'app-root', 
    template: '<div></div>' 
}) 

export class AppComponent implements AfterViewInit { 
urlinput; 
    constructor(elRef: ElementRef){ 
    this.urlinput = elRef.nativeElement.getAttribute('urlinput'); 
    this.loadScript(); 
    } 
    ngAfterViewInit() { 
    // need to call the js function here 
    //tried like this initializeDataTable(this.urlinput) not worked 
    } 

loadScript() { 
    var head = document.getElementsByTagName('head')[0]; 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = "app/Message.js"; 
    head.appendChild(script); 
} 
} 

Message.js (बाहरी जे एस फ़ाइल)

function initializeDataTable(dTableURL){ 
     $.ajax({ 
       "url": dTableURL, 
       "success": function(json) { 
        var tableHeaders; 
        $.each(json.columns, function(i, val){ 
         tableHeaders += "<th>" + val + "</th>"; 
        }); 
        $("#tableDiv").empty(); 
        $("#tableDiv").append('<table id="displayTable" class="display" cellspacing="0" width="100%"><thead><tr>' + tableHeaders + '</tr></thead></table>'); 
        $('#displayTable').dataTable(json); 
       }, 
        "dataType": "json" 
     }); 
    } 

index.html

<app-root urlinput="app/array.txt">Loading...</app-root> 

कृपया इस समस्या को हल करने में मेरी मदद करें।

Answer 1

इसे संपत्ति window ऑब्जेक्ट पर बनाना चाहिए। के बाद से खिड़की वस्तु शायद कुछ परिभाषा फ़ाइल में घोषित किया जाता है, तो आप ऐसा कर सकते हैं:

window['message']('Hello, world!') 

या एक चर के लिए सेट है और उपयोग यह:

var message: any = window['message']; 
message('Hello, world!'); 

या संपत्ति टाइपप्रति तरह से, समारोह की घोषणा , यह आपके स्रोत फ़ोल्डर में .d.ts नामित किसी भी फाइल में जा सकते हैं:

declare function message(msg: string) : void; 

भी this question देखें।

स्क्रिप्ट को गतिशील रूप से लोड करने में समस्या यह है कि आप यह सुनिश्चित नहीं कर सकते कि स्क्रिप्ट आपके निष्पादित होने पर लोड हो जाती है। आपको शायद message(msg: string) विधि के साथ एक सेवा बनाना चाहिए। सेवा के लिए कन्स्ट्रक्टर स्क्रिप्ट टैग बना सकता है (और जांचें कि कोई सिंगलटन नहीं होने पर पहले से मौजूद है या नहीं, और यदि आप स्क्रिप्ट लोड के बाद उन्हें संसाधित करना चाहते हैं तो संदेशों को कतारबद्ध करें। किसी स्क्रिप्ट के लोडिंग का पता लगाने में पूर्ण क्रॉस ब्राउज़र समर्थन नहीं है, इसलिए आप Google Analytics की तरह कुछ कर सकते हैं और कुछ वैश्विक विंडो प्रॉपर्टी सेट कर सकते हैं कि आपकी बाहरी स्क्रिप्ट किसी लंबित संदेशों को संसाधित करने के अंत में कॉल करेगी:

इन सेवा:

constructor() { 
    if (!window['message']) { 
    window['message'] = function(msg) { 
     window['messagequeue'] = window['messagequeue'] || []; 
     window['messagequeue'].push(msg); 
    } 
    } 
    // add script tag to load script 
} 

message(msg) { 
    window['message'](msg); 
} 

अपनी स्क्रिप्ट में:

function message(msg) { 
    console.log(msg) 
    //logics goes here 
} 

// process messages queued before script loaded 
if (window['messagequeue']) { 
    window['messagequeue'].forEach(msg => message(msg)); 
}