角度2/4動態加載腳本

Question

在角度2中，可以根據組件加載CSS樣式。但是，沒有相應的方法來加載腳本文件。我目前正在將所有腳本加載到單頁應用程序的基本頁面上，但這會導致優化問題。

什麼是爲Angular 2/4組件加載腳本的建議方式。

Answer 1

 Well you can load script dynamically in any component. 

     Here is the solution. 

     1. Create a service in which you'll have js file. 
     Example-script.store.ts 

     interface Scripts { 
      name: string; 
      src: string; 
     } 

     export const ScriptStore: Scripts[] = [ 
      { name: 'moment', src: 'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js' }, 
      { name: 'datatables', src: 'https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js' } 

     ]; 

    2. Now create a service that will load & return the status of the script. 

    Example- script.service.ts 


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

    declare var document: any; 
    declare var jQuery: any; 

    @Injectable() 
    export class Script { 
     public scripts: any = {}; 

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

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

3. Now you just to import & call the service. 
Example- 


import- 
import {Script} from './script.service'; (specify the apth where you have created the service) 

Now call service- 

     ngAfterViewInit() { 
     this._script.load('datatables') 
      .then((data:any)=>{ 
       console.log(data,'script loaded') 
      }) 
      .catch((error)=>{ 
     }); 
    } 

它會動態添加'datatables'腳本。

這隻適用於您的目的，但它也只會在需要時加載。