在 angular 4 中添加脚本标签

Question

我正在使用 angular4 来实现我网站的管理面板。对于 ui，我使用的是从互联网上免费下载的模板。这个模板有一个 datatable 功能，它以非常好的方式显示数据，并使我能够搜索、排序和分页。我正在将此 table 加载到名为 organization-list.component 的 angular 组件中，即：

    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>

问题是我想在每次加载此页面时调用这段代码（我使用 angular 路由，因此页面不会完全加载）。解决办法是什么？谢谢。

Answer 1

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

将其留给您的加载程序或打包程序。如果您使用的是 SystemJS 或 Webpack 3*，那么只需

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

使用子视图访问应用数据表的元素。

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();
  }

}

完全删除包含 $('#datatable').datatable() 的脚本标签。

请注意，在撰写本文时，Angular CLI 基于 Webpack。

在 angular 4 中添加脚本标签

adding script tag in angular 4

typescript

angular2-routing

angular