javascript - 在 Angular 4 中动态加载 Javascript 脚本

Question

我想在 Angular 4 中动态加载脚本。脚本本身的名称稍后将来自 Ajax 调用。目前为了加载 JavaScript 文件，我将 Jquery 导入到我的 Angular 项目中。之后，我使用 GetScript 方法并可以加载该文件，但如果我想调用这样的函数:

import { Component } from '@angular/core';
import * as jQuery from 'jquery';

declare var $:any;
declare var jquery:any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  title = 'angular 4 with jquery';
  url = "currently hardcoded";

    getScript42(){
      $.getScript(this.url).done(function() {
      logger();
    });
    }
  }

我收到以下错误:找不到名称“记录器”

但是在我的 JavaScript 文件中定义了该函数:

$(document).ready(function(){

  function logger(){
  console.log("it worked");
  }
});

如果我不为此使用函数，它就可以工作。

那么现在我的问题是你们知道加载该文件并调用特定函数的方法吗？

Answer 1

在 Angular 生命周期中，AfterViewInit 在加载 View 时被调用，这意味着您的 html 已准备好 dom 并准备好接受任何额外的脚本标签。

所以你可以通过实现接口(interface)在你的afterviewinit方法中写这些。

declare var $:any;
declare var jquery:any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {

  title = 'angular 4 with jquery';
  url = "currently hardcoded";

      ngAfterViewInit(): void {
        $.getScript(this.url).done(function() {
          logger();
        });
    }
  }