Angular2 Calling an External JS File Function Inside Components

Question

Sorry if this question is repeated. I could not find any correct solution still on the Internet, so I post here.

I am creating a component in angular 2. I have an external js file and load it dynamically. In the external js file, I have a function with a parameter. How can I call this parameter inside ngAfterViewInit . I am new to angular 2, so I don’t know how to call the js function in angular 2 typescript, I will send my code for your reference

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 (external Js file)

 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> 

Please help me solve this problem.

Answer 1

This should create the message property of the window object. Since the window object is probably declared in some definition file, you can do this:

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

Or set it to a variable and use it:

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

Or the typescript property, declare a function, it can be in any file named .d.ts in the source folder:

 declare function message(msg: string) : void; 

See this question .

The problem with loading the script dynamically is that you cannot be sure that the script is loading when the code loads. You should probably create a service using the message(msg: string) method. The service constructor can create a script tag (and check if it exists, if not one), and send messages to the queue if you want to process them after the script is loaded. The script load detection does not have full cross-browser support, so you can do something like google analytics and set some kind of global window property that your external script will call at the end to handle any pending messages:

In the service:

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

In the script:

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