Dynamicznie ładuj zewnętrzny plik javascript z Angular komponentu

Question

Tworzę aplikację Angular przy użyciu Angular 4 i CLI. Próbuję dodać widget wyszukiwania SkyScanner do jednego z moich komponentów.

Skyscanner Widget Example

ramach realizacji wymaga dodania nowego skryptu zewnętrzne:

<script src="https://widgets.skyscanner.net/widget-server/js/loader.js" async></script> 

nie jestem pewny poprawnej sposób odwoływać się do tego pliku. Jeśli dodaję skrypt do mojego pliku index.html, widget nie zostanie załadowany, dopóki nie zostanie wykonane pełne odświeżenie strony. Zakładam, że skrypt próbuje manipulować DOM przy obciążeniu, a elementy nie istnieją podczas działania skryptu.

Jaki jest prawidłowy sposób ładowania skryptu tylko po załadowaniu komponentu zawierającego widget Skyscanner?

Answer 1

Try załadować skrypt na ładowanie komend, jak poniżej:

loadAPI: Promise<any>; 

constructor() {   
    this.loadAPI = new Promise((resolve) => { 
     this.loadScript(); 
     resolve(true); 
    }); 
} 

public loadScript() {   
    var isFound = false; 
    var scripts = document.getElementsByTagName("script") 
    for (var i = 0; i < scripts.length; ++i) { 
     if (scripts[i].getAttribute('src') != null && scripts[i].getAttribute('src').includes("loader")) { 
      isFound = true; 
     } 
    } 

    if (!isFound) { 
     var dynamicScripts = ["https://widgets.skyscanner.net/widget-server/js/loader.js"]; 

     for (var i = 0; i < dynamicScripts .length; i++) { 
      let node = document.createElement('script'); 
      node.src = dynamicScripts [i]; 
      node.type = 'text/javascript'; 
      node.async = false; 
      node.charset = 'utf-8'; 
      document.getElementsByTagName('head')[0].appendChild(node); 
     } 

    } 
} 

Answer 2

dodać loader.js do folderu swoje aktywa następnie w angular-cli.json

"scripts": ["./src/assets/loader.js",] 

następnie dodać do swojej typings.d.ts

declare var skyscanner:any; 

i będzie można z niego korzystać

skyscanner.load("snippets","2"); 

Answer 3

Można zrobić jedną rzecz

jeśli masz skośnych cli.json

następnie można zadeklarować do skryptu

jak

"scripts": ["../src/assets/js/loader.js"] 

A potem zadeklarować w Skyscanner Twój komponent podobnie jak

declare var skyscanner:any; 

To wszystko!

Nadzieja to pomóc

Answer 4

Zrobiłem ten fragment kodu

addJsToElement(src: string): HTMLScriptElement { 
    const script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = src; 
    this.elementRef.nativeElement.appendChild(script); 
    return script; 
    } 

a następnie wywołać go jak ten

this.addJsToElement('https://widgets.skyscanner.net/widget-server/js/loader.js').onload =() => { 
     console.log('SkyScanner Tag loaded'); 
} 

Answer 5

Można tworzyć własne dyrektywę, aby załadować skrypt jako poniżej:

import { Directive, OnInit, Input } from '@angular/core'; 

@Directive({ 
    selector: '[appLoadScript]' 
}) 
export class LoadScriptDirective implements OnInit{ 

    @Input('script') param: any; 

    ngOnInit() { 
     let node = document.createElement('script'); 
     node.src = this.param; 
     node.type = 'text/javascript'; 
     node.async = false; 
     node.charset = 'utf-8'; 
     document.getElementsByTagName('head')[0].appendChild(node); 
    } 

} 

I można go używać w dowolnym miejscu w szablonie elementów jak poniżej

<i appLoadScript [script]="'script_file_path'"></i> 

Dla przykładu, aby załadować dynamicznie JQuery w składniku, wstawić poniżej kodu w szablonie komponentu za

<i appLoadScript [script]="'/assets/baker/js/jquery.min.js'"></i>