वेब से गतिशील रूप से कोणीय 2 घटक

Question

में किसी तृतीय पक्ष स्क्रिप्ट को लोड करने के लिए मैं वेब की एक तृतीय पक्ष स्क्रिप्ट लोड करने की कोशिश कर रहा हूं, इसकी स्थानीय प्रतिलिपि बनाने के बजाय और तृतीय पक्ष स्क्रिप्ट के वैश्विक चर और कार्यों का उपयोग करने में सक्षम हूं लिपि भार।

अद्यतन: Plunker JS link

यहाँ की Angular2 संस्करण है:

• यहाँ मैं क्या जहां वीजा चेकआउट बटन पर क्लिक सादे जावास्क्रिप्ट में प्राप्त करने के लिए कोशिश कर रहा हूँ का एक उदाहरण वीजा चेकआउट संवाद खुलता है यह है जहाँ मैं मदद की जरूरत है: Plunker Angular2 link

मुद्दा: घटक नीचे डब्ल्यू से स्क्रिप्ट लोड नहीं कर रहा है ईबी

import {Component} from '@angular/core' 
 

 
@Component({ 
 
    selector: 'custom', 
 
    providers: [], 
 
    template: ` 
 
    <div> 
 
     <h2>{{name}}</h2> 
 
     <img class="v-button" role="button" alt="Visa Checkout" src="https://sandbox.secure.checkout.visa.com/wallet-services-web/xo/button.png"> 
 
     <script src="https://sandbox-assets.secure.checkout.visa.com/checkout-widget/resources/js/integration/v1/sdk.js"> 
 
</script> 
 
    </div> 
 
    ` 
 
}) 
 
export class CustomComponent { 
 
    constructor() { 
 
    this.name = 'Custom Component works!!' 
 
    } 
 
}

Answer 1

दो तरीके है कि इस पूरा किया जा सकता है।

1. आपके द्वारा जोड़े जा रहे तृतीय पक्ष स्क्रिप्ट के लिए एक प्रकार की परिभाषा फ़ाइल का संदर्भ लें। टाइप परिभाषा फाइल आमतौर पर .d.ts में समाप्त होती है और मूल रूप से स्क्रिप्ट के कार्यों के लिए एक इंटरफ़ेस होती है। यदि पूर्व परिभाषित प्रकार की परिभाषा फ़ाइल नहीं है तो आप अपने स्वयं के कार्यों के साथ स्वयं को बना सकते हैं। (मैं इस विधि को पसंद करता हूं क्योंकि कुछ आईडीई आपको इंटेलिजेंस के हिस्से के रूप में विधि हस्ताक्षर देंगे)
2. टाइपस्क्रिप्ट क्लास के शीर्ष पर एक चर बनाएँ जो उस लाइब्रेरी का प्रतिनिधित्व करता है जिसका उपयोग आप any के प्रकार से कर रहे हैं;

उदाहरण का उपयोग करते हुए AutoMapperTS:

प्रकार परिभाषा:।।

/// <reference path="../node_modules/automapper-ts/dist/automapper.d.ts" /> 

@Component({ 
    selector: "my-app", 
}) 
export class AppComponent { 
    constructor() { 
     automapper.map("JSON", "myType", jsonObj); 
    } 
} 

(इस उदाहरण में संदर्भ अलग अपने संपादक के आधार पर यह उदाहरण दृश्य स्टूडियो का उपयोग कर रहा हो सकता है खींचने की कोशिश करें वह फ़ाइल जिसे आप संपादक विंडो पर संदर्भित करना चाहते हैं यह देखने के लिए कि आपका आईडीई आपके लिए संदर्भ बनायेगा या नहीं।)

घोषणा:

declare var automapper: any; 

@Component({ 
    selector: "my-app", 
}) 
export class AppComponent { 
    constructor() { 
     automapper.map("JSON", "myType", jsonObj); 
    } 
} 

3 पार्टी जे एस फ़ाइल मानक <script> टैग आयात का उपयोग लोड किया जा सकता। उपर्युक्त विधियां टीएस कंपाइलर के लिए हैं ताकि यह किसी अज्ञात चर अपवाद के साथ विफल न हो।

Answer 2

आप इस तकनीक का उपयोग कर अपने कोणीय 2/4 प्रोजेक्ट में मांग पर जेएस स्क्रिप्ट और पुस्तकालयों को गतिशील रूप से लोड कर सकते हैं।

script.store में ScriptStore बनाएं।ts कि पथ स्क्रिप्ट के में शामिल होंगे तो स्थानीय या दूरस्थ सर्वर और एक नाम कि स्क्रिप्ट गतिशील लोड करने के लिए उपयोग किया जाएगा पर:

interface Scripts { 
    name: string; 
    src: string; 
} 
export const ScriptStore: Scripts[] = [ 
    {name: 'filepicker', src: 'https://api.filestackapi.com/filestack.js'}, 
    { name: 'rangeSlider', src: '../../../assets/js/ion.rangeSlider.min.js' } 
]; 

script.service.ts बनाएंScriptService प्रदान करने के लिए एक इंजेक्शन योग्य सेवा के रूप में जो स्क्रिप्ट फ़ाइलों को लोड करने में संभाल लेंगे। इस कोड को शामिल करें:

import {Injectable} from "@angular/core"; 
import {ScriptStore} from "./script.store"; 

declare var document: any; 

@Injectable() 
export class Script { 

private scripts: any = {}; 

constructor() { 
    ScriptStore.forEach((script: any) => { 
     this.scripts[script.name] = { 
      loaded: false, 
      src: script.src 
     }; 
    }); 
} 

load(...scripts: string[]) { 
    var promises: any[] = []; 
    scripts.forEach((script) => promises.push(this.loadScript(script))); 
    return Promise.all(promises); 
} 

loadScript(name: string) { 
    return new Promise((resolve, reject) => { 
     //resolve if already loaded 
     if (this.scripts[name].loaded) { 
      resolve({script: name, loaded: true, status: 'Already Loaded'}); 
     } 
     else { 
      //load script 
      let script = document.createElement('script'); 
      script.type = 'text/javascript'; 
      script.src = this.scripts[name].src; 
      if (script.readyState) { //IE 
       script.onreadystatechange =() => { 
        if (script.readyState === "loaded" || script.readyState === "complete") { 
         script.onreadystatechange = null; 
         this.scripts[name].loaded = true; 
         resolve({script: name, loaded: true, status: 'Loaded'}); 
        } 
       }; 
      } else { //Others 
       script.onload =() => { 
        this.scripts[name].loaded = true; 
        resolve({script: name, loaded: true, status: 'Loaded'}); 
       }; 
      } 
      script.onerror = (error: any) => resolve({script: name, loaded: false, status: 'Loaded'}); 
      document.getElementsByTagName('head')[0].appendChild(script); 
     } 
    }); 
} 

} 

इंजेक्षन ScriptService भी आप यह और जरूरत है इस तरह लोड स्क्रिप्ट:

constructor(
    private scriptService: ScriptService 
) { } 

ngOnInit() { 
    this.scriptService.load('filepicker', 'rangeSlider').then(data => { 
     console.log('script loaded ', data); 
    }).catch(error => console.log(error)); 
} 

Answer 3

मैं Rahul Kumar's answer इतना है कि यह observables बजाय का उपयोग करता है को संशोधित किया है:

import { Injectable } from "@angular/core"; 
import { Observable } from "rxjs/Observable"; 
import { Observer } from "rxjs/Observer"; 

@Injectable() 
export class ScriptLoaderService { 
    private scripts: {ScriptModel}[] = []; 

    public load(script: ScriptModel): Observable<ScriptModel> { 
     return new Observable<ScriptModel>((observer: Observer<ScriptModel>) => { 
      var existingScript = this.scripts.find(s => s.name == script.name); 

      // Complete if already loaded 
      if (existingScript && existingScript.loaded) { 
       observer.next(existingScript); 
       observer.complete(); 
      } 
      else { 
       // Add the script 
       this.scripts = [...this.scripts, script]; 

       // Load the script 
       let scriptElement = document.createElement("script"); 
       scriptElement.type = "text/javascript"; 
       scriptElement.src = script.src; 

       scriptElement.onload =() => { 
        script.loaded = true; 
        observer.next(script); 
        observer.complete(); 
       }; 

       scriptElement.onerror = (error: any) => { 
        observer.error("Couldn't load script " + script.src); 
       }; 

       document.getElementsByTagName('body')[0].appendChild(scriptElement); 
      } 
     }); 
    } 
} 

export interface ScriptModel { 
    name: string, 
    src: string, 
    loaded: boolean 
}