Question

在角度2中，可以根据组件加载CSS样式。但是，没有相应的方法来加载脚本文件。我目前正在我的单页应用程序的基页上加载所有脚本，但这会导致优化问题。

为Angular 2/4组件加载脚本的建议方法是什么。

Answer 1

您可以在任何组件中动态加载脚本。

以下是解决方案：

创建一个您将拥有js文件的服务。

// 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' }
];

现在创建一个将加载＆amp;返回脚本的状态。

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

现在你只需要导入＆amp;打电话给服务。

// import
import {Script} from './script.service'; // specify the path where you have created the service

// Now call service

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

它将动态添加＆＃39;数据表＆＃39;的脚本。

这仅用于您的目的，但也会在必要时加载。

Answer 2

您可以在component.ts文件中加载动态多个脚本：

 loadScripts() {
    const dynamicScripts = [
     'https://platform.twitter.com/widgets.js',
     '../../../assets/js/dummyjs.min.js'
    ];
    for (let i = 0; i < dynamicScripts.length; i++) {
      const 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);
    }
  }

并在构造函数中调用此方法，

constructor() {
    this.loadScripts();
}

注意：要动态加载更多脚本，请将它们添加到dynamicScripts数组。

Angular 2/4动态加载脚本

2 个答案: