Question

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

    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>

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

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。

在角度4中添加脚本标记

1 个答案: