[JQUERY] 템플릿 DOM이로드되면 ANGLE2 템플릿 / 후크의 스크립트 태그

템플릿 DOM이로드되면 ANGLE2 템플릿 / 후크의 스크립트 태그

해결법

1. ---

   1.구성 요소 템플릿의 스크립트 태그가 제거됩니다. 해결 방법은 NGAfterViewInit ()에서 스크립트 태그를 동적으로 작성하는 것입니다.

   구성 요소 템플릿의 스크립트 태그가 제거됩니다. 해결 방법은 NGAfterViewInit ()에서 스크립트 태그를 동적으로 작성하는 것입니다.

   https://github.com/angular/angular/issues/4903을 참조하십시오

   constructor(private elementRef:ElementRef) {};
   
   ngAfterViewInit() {
     var s = document.createElement("script");
     s.type = "text/javascript";
     s.src = "http://somedomain.com/somescript";
     this.elementRef.nativeElement.appendChild(s);
   }
   

   https://stackoverflow.com/a/9413803/217408을 참조하십시오

   더 나은 방법은 스크립트를로드하려면 require ()를 사용하는 것일 수 있습니다.

   템플릿 DOM이로드되면 ANGLE2 템플릿 / 후크의 스크립트 태그를 참조하십시오.

2. ---

   2.나는 동일한 문제가 발생했지만, 또한 나는 많은 스크립트로로드해야했고, 그 중 일부는 병렬로로드 될 수 있고, 다른 사람들은 시리즈로로드되어야했다. 이 솔루션은 Typesscript 2.1 이상을 사용하는 경우, AS3 / AWAIT 및 ES3 / ES5에 대한 변형을 기본 지원하는 경우가 있습니다.

   나는 동일한 문제가 발생했지만, 또한 나는 많은 스크립트로로드해야했고, 그 중 일부는 병렬로로드 될 수 있고, 다른 사람들은 시리즈로로드되어야했다. 이 솔루션은 Typesscript 2.1 이상을 사용하는 경우, AS3 / AWAIT 및 ES3 / ES5에 대한 변형을 기본 지원하는 경우가 있습니다.

   async ngAfterViewInit() {
     await this.loadScript("http://sub.domain.tld/first-script.js")
     await this.loadScript("http://sub.domain.tld/second-script.js")
   }
   
   private loadScript(scriptUrl: string) {
     return new Promise((resolve, reject) => {
       const scriptElement = document.createElement('script')
       scriptElement.src = scriptUrl
       scriptElement.onload = resolve
       document.body.appendChild(scriptElement)
     })
   }
   

   병렬로로드 할 수있는 모든 스크립트의 경우 Promise.all을 활용할 수 있습니다.

   async ngAfterViewInit() {
     await Promise.all([
       this.loadScript("http://sub.domain.tld/first-parallel.js"),
       this.loadScript("http://sub.domain.tld/second-parallel.js")
     ])
     await this.loadScript("http://sub.domain.tld/after-parallel.js")
   }
   

   참고 : 약속 거부의 경우 ScriptElement.Onerror = LoadScript () 함수에서 거부 할 수 있습니다. 그러나이 상황에서 일부 기발한 행동이 발생했습니다. 스크립트가 무엇을하더라도 스크립트를 계속로드하도록하려면 OnError가 호출 될 때의 해결 약속을 실험 할 수 있습니다.

from https://stackoverflow.com/questions/34140065/script-tag-in-angular2-template-hook-when-template-dom-is-loaded by cc-by-sa and MIT license