javascript - Angular2 Pozivanje funkcije iz vanjske JS datoteke unutar komponenti

Oprostite dečki ako je ovo pitanje duplicirano. Još uvijek nisam uspio pronaći odgovarajuće rješenje na internetu, pa ga objavljujem ovdje.

Stvaram komponentu u Angular 2. Imam vanjsku js datoteku i učitavam je dinamički. U vanjskoj js datoteci imam funkciju s parametrom. Kako mogu pozvati taj parametar unutar ngAfterViewInit? Nov sam u Angular 2, pa ne znam kako pozvati js funkciju u Angular 2 Typescript-u, objavit ću svoj kod za vašu referencu.

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 (Vanjska Js datoteka)

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>

Molim te, pomozi mi riješiti ovaj problem.

Odgovor #1

To bi trebalo stvoriti message svojstvo na window objektu. Budući da je window objekt vjerojatno deklariran u nekoj definicijskoj datoteci, možete to učiniti ovako:

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

Ili postavite to u varijablu i koristite je:

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

Ili na TypeScript način, deklarirajte funkciju, ovo može ići u bilo koju datoteku nazvanu .d.ts u vašoj mapi izvora:

declare function message(msg: string) : void;

Pogledaj i ovo pitanje.

Problem s dinamičkim učitavanjem skripte je u tome što ne možete biti sigurni da je skripta učitana kada se vaš kod izvrši. Vjerojatno biste trebali stvoriti servis s metodom message(msg: string). Konstruktor servisa može stvoriti script tag (i provjeriti postoji li već ako nije singleton) te staviti poruke u red ako ih želite obraditi nakon učitavanja skripte. Detekcija učitavanja skripte nema potpunu podršku u svim preglednicima, pa biste mogli napraviti nešto slično kao Google Analytics i postaviti neku globalnu window varijablu koju će vaša vanjska skripta pozvati na kraju kako bi obradila sve čekajuće poruke:

U službi:

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

U vašem scenariju:

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

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

Povezani članci