각도 4에 스크립트 태그 추가

Question

메신저로 내 사이트의 관리 패널을 구현하려면 angular4를 사용하고 있습니다. 내가 인터넷에서 무료로 다운로드 한 템플릿을 사용하고 있습니다. 이 템플릿에는 데이터를 매우 멋진 방식으로 보여주고 검색, 정렬 및 페이지 매김 기능을 제공하는 데이터 테이블 기능이 있습니다. 메신저로드 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); 
    }); 
    } 
} 

그리고이 것이 좋습니다.

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

문제는 내가 때마다이 페이지가로드 코드의 평화를 호출 할 것입니다 (제가 사용 : 스크립트에서 나는 이런 식으로 HTML 페이지의 끝에서 호출해야하는 함수라는 데이터 테이블입니다 언급 각도 라우팅 그래서 페이지 dosnt로드 전적으로). 해결 방안은 무엇인가 ? 덕분에 .

Answer 1

스크립트를 지정되지 않은 순서로로드하고 있으며 성능에 좋지 않고 해당 동작을 예기치 않게 캐싱하지 않습니다.

로더 또는 번들러에 맡깁니다. 그런 다음, SystemJS 또는 웹팩 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을 기반으로합니다.