Question

我想在Angular 4中加载脚本动态。脚本本身的名称稍后将来自Ajax调用。目前要加载我导入Jquery的JavaScript文件到我的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();
    });
    }
  }

我收到以下错误：找不到名称＆＃39;记录器＆＃39;

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

$(document).ready(function(){

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

如果我没有使用这个功能它有效。

所以现在我的问题你们知道一种加载该文件并调用特定函数的方法吗？

Answer 1

在角度生命周期中，在加载视图时调用AfterViewInit，这意味着您的html已准备就绪，可以接受任何其他脚本标记。

所以你可以通过实现界面在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();
        });
    }
  }

在Angular 4中动态加载Javascript脚本

1 个答案: