角度4のスクリプトタグを追加

Question

私は自分のサイトの管理パネルを実装するためにangular4を使用しています。私は無料でインターネットからダウンロードしたテンプレートを使用しています。このテンプレートには、データを表示するデータ可能な機能があり、検索、並べ替え、改ページが可能です。この形式の読み込み機能の

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

2つのスクリプトがあります：jquery.dataTables.min.jsとjquery.dataTables.min.js私はテーマがちょうどこのコンポーネント（ページ）にロードしたいですorganization-list.componentと呼ばれる角度成分で イム・ロードこの表。だから私はそれらを読み込むために、この関数を使用した：

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

これは良い作品です。

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

問題は私が使用して（毎回、このページが読み込まコードのこの平和を呼びたいということです：スクリプトで私はこのようなhtmlページの最後に呼ばれなければならないのDataTableと呼ばれる関数である言及しました角度ルーティングなので、ページの読み込み負荷は完全に）。解決策は何ですか？ありがとう。

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をベースにしています。