Question

最初，我在Index.html中静态地保持下面的代码，并且可以正常工作。

const express = require('express');
const bodyParser = require('body-parser');

const { mongoose } = require('./config/db.js');
var { routes } = require('./routes/routes');

var app = express();
app.use(bodyParser.json());

app.listen(3000, () => console.log('server started'));

app.use('/cats', routes);

由于我的要求，我决定为编写示例代码而动态加载。

<script src="/le.min.js"></script>
<script>
    LE.init({
        token: 'token',
        region: 'x'
    });
</script>

两者都正确添加，但会引发错误//loads librabry jsScript = document.createElement('script'); jsScript.src = `/le.min.js`; document.head[0].appendChild(jsScript); //loads initialise function in the script script = document.createElement('script'); script.innerHtml= `LE.init({ token: '${TOKEN}', region: 'US' });` document.head[0].appendChild(script);。如果我将初始化函数脚本附加为LE is not defined，则不会发生错误，但不会进行初始化。我该如何实现？

Answer 1

在Angular中动态加载脚本的正确方法是使用Renderer2类。首先将其注入到构造函数中，然后使用它将脚本添加到文档的head标签中。

constructor(private renderer: Renderer2) { }

ngOnInit() {
  const script = this.renderer.createElement('script');
  script.src = `https://cdnjs.cloudflare.com/ajax/libs/le_js/0.0.3/le.min.js`;
  this.renderer.appendChild(document.head, script);
}

从加载到应用程序的js脚本文件中执行功能的正确方法是在组件/服务/中声明（declare var LE: any;）该对象或您想使用它的任何其他地方。这样，您可以直接执行其功能，而无需使用动态脚本。

一旦声明您可以直接使用它，请参见以下示例代码：

declare var LE: any;

initLE() {
  LE.init({
    token: '${TOKEN}',
    region: 'US'
  });
}

log() {
  LE.log("Hello, logger!");
}

查看此StackBlitz DEMO

您可以看到，在此DEMO中，我正在访问LE代码，但显然由于缺少令牌而无法正常工作。

完整示例代码：

import { Component, OnInit, Renderer2 } from '@angular/core';

declare var LE: any;

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  constructor(private renderer: Renderer2) {

  }

  ngOnInit() {
    const script = this.renderer.createElement('script');
    script.src = `https://cdnjs.cloudflare.com/ajax/libs/le_js/0.0.3/le.min.js`;
    this.renderer.appendChild(document.head, script);
  }

  initLE() {
    LE.init({
      token: '${TOKEN}',
      region: 'US'
    });
  }

  log() {
    LE.log("Hello, logger!");
  }
}

如何以角度动态地加载脚本及其功能

1 个答案: