如何在继续之前立即加载脚本文件（动态添加）？

Question

我已经在 angular home.component.ts 文件中加载了如下代码的脚本文件

export class HomeComponent {
    constructor() {
        this.loadDynmicallyScript();
    } 
     public loadDynmicallyScript() {
        var script = document.createElement('script');
        script.src = "../node_modules/xxxxxx/i18n/xx.min.js";
        script.async =false;
        document.head.appendChild(script);

     }

但是这个文件是在组件创建之后才加载的。因此，在这种情况下，它不使用此文件。一旦我附加到文档中，我想加载这个文件。如何做到这一点？

Answer 1

你可以返回一个承诺来链式调用

export class HomeComponent {
    constructor() {
        this.loadDynmicallyScript()
        .then(() => {
          this.doSomethingWhenScriptIsLoaded();
        });
    } 
     public loadDynmicallyScript():Promise {
        var script = document.createElement('script');
        script.src = "../node_modules/xxxxxx/i18n/xx.min.js";
        script.async =false;
        document.head.appendChild(script);
        return Promise((resolve, reject) => {
          script.onload = resolve;
        });    
     }

或者只是将一个函数传递给onLoad，以便在加载脚本时调用

export class HomeComponent {
    constructor() {
        this.loadDynmicallyScript()
    } 
     public loadDynmicallyScript():Promise {
        var script = document.createElement('script');
        script.src = "../node_modules/xxxxxx/i18n/xx.min.js";
        script.async =false;
        document.head.appendChild(script);
        script.onload = () => this.doSomethingWhenScriptIsLoaded();
     }