在angular 4中添加脚本标记

我使用angular4来实现我的站点的管理面板。对于ui，我使用的是从internet免费下载的模板。这个模板有一个datatable特性，它以一种非常好的方式显示数据，并使我能够搜索、排序和分页。 我正在将此表加载到一个称为组织列表的角度组件中。组件即：

    import { Component, AfterViewChecked } from "@angular/core";
    import { Script } from "../../shared/services/scriptLoader.service";

    @Component({
      selector: "organization-list",
      templateUrl: "./organization-list.component.html"
    })
    export class OrganizationListComponent implements AfterViewChecked {
      constructor(private script: Script) {

      }

      ngAfterViewChecked() {
        this.script.loadScript("assets/datatables/jquery.dataTables.min.js");
        this.script.loadScript("assets/datatables/dataTables.bootstrap.js");
      }
    }

要加载此表单的功能，有两个脚本：

jquery.dataTables.min.js

和

jquery.dataTables.min.js

，我只想在这个组件（第页）中加载它们。所以我用这个函数来加载它们：

import { Injectable } from '@angular/core';

declare var document: any;

@Injectable()
export class Script {

  loadScript(path: string) {
    //load script
    return new Promise((resolve, reject) => {
      let script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = path;
      if (script.readyState) {  //IE
        script.onreadystatechange = () => {
          if (script.readyState === "loaded" || script.readyState === "complete") {
            script.onreadystatechange = null;
            resolve({ loaded: true, status: 'Loaded' });
          }
        };
      } else {  //Others
        script.onload = () => {
          resolve({ loaded: true, status: 'Loaded' });
        };
      };
      script.onerror = (error: any) => resolve({ loaded: false, status: 'Loaded' });
      document.getElementsByTagName('head')[0].appendChild(script);
    });
  }
}

这很有效。在我提到的脚本中，有一个名为datatable的函数，必须在html页面的末尾调用，如下所示：

<script>
  $(document).ready(function() {
    $('#datatable').dataTable();
  });
</script>

$（文档）.ready（函数（）{
$（'#datatable'）。datatable（）；
});

问题是，每次加载这个页面时，我都想调用这种代码和平（我使用角度路由，所以页面完全不加载）。解决办法是什么？

---

谢谢。

您正在以未指定的顺序加载脚本，并且没有缓存它们，这对性能有害，并使它们的行为不可预测

将其留给装载机或捆绑机。如果您使用的是SystemJS或Webpack3*，那么

import 'assets/datatables/jquery.dataTables.min.js';
import 'assets/datatables/dataTables.bootstrap.js';

使用视图子级访问datatable应用到的元素

import {Component, ViewChild} from '@angular/core';
import $ from 'jquery';
import 'assets/datatables/jquery.dataTables.min.js';
import 'assets/datatables/dataTables.bootstrap.js';


@Component({
  template: '<div #datatable></div>'
}) export default class {
  @ViewChild('datatable') datatable: Element;

  ngAfterViewInit() {
    $(this.datatable).datatable();
  }

}

从'@angular/core'导入{Component，ViewChild}；
从“jquery”导入美元；
导入'assets/datatables/jquery.datatables.min.js'；
导入“assets/datatables/datatables.bootstrap.js”；
@组成部分({
模板：“”
})导出默认类{
@ViewChild（'datatable'）datatable:元素；
ngAfterViewInit（）{
$（this.datatable）.datatable（）；
}
}

完全删除包含

$（'#datatable'）.datatable（）的脚本标记

请注意，在撰写本文时，Angular CLI基于Webpack。
还有许多其他数据表。请避免使用jQuery@Aravind我的模板是用jquery编写的。我能做什么？你的方法错了。无论在哪里使用datatable，都应该在那里运行代码。我假设您的代码分成多个组件，调用$（'#datatable'）.datatable（）；ngOnInit生命周期钩子的一部分。@Aravind为什么要避免使用jQuery？我只是好奇。使用jQuery有什么缺点吗？谢谢你的回答。我在angular-cli.json中添加了脚本，它们很受欢迎，但是当我调用.datatable时，正如您所说的，我会给出$（…）。datatable不是一个函数error不要这样做。您希望使用包管理器安装依赖项。您还希望消除全局变量。根据您的评论，除了使用systemjs或webpack之外，我没有其他方法？CLI构建在webpack之上。从技术上讲，你也可以使用其他工具。