tag script in template angular2 / hook quando viene caricato template dom

Sono abbastanza bloccato e non so come risolvere il mio problema …

Semplificato: ho un componente che crea un ulist basato su un binding, come questo:

@Component({ selector: "template", template: ` 
  • {{challenge}}
`}) export class JobTemplate{ jobs: Jobs; constructor(jobs:Jobs){ this.jobs = jobs } }

Il selettore / host del componente è incorporato nel stream html normale ed echeggiato da php e viene utilizzato per sostituire un ulist predefinito. Il problema è che sul sito normale, un tag script dopo l’ulist è stato usato per applicare qualche magia jquery nella lista.

Poiché il tag dello script viene echeggiato prima che il modello del mio componente abbia completato il caricamento, le chiamate jquery non troveranno gli elementi del mio modello DOM. Mettere il tag script all’interno del mio modello (alla fine) non funziona; sembra semplicemente essere ignorato.

   $("ul a").on("click", function (event) { var parent = $(this).parent(); if(parent.hasClass('active')) ....slideToggle("normal"); else .... });  

Inoltre, il sito utilizza il framework di base e ogni volta che un nuovo elemento viene aggiunto alla pagina (ad es. Tramite il binding del mio componente che viene aggiornato esternamente) devo chiamare $(document).foundation() .

Quindi la mia domanda è: come posso ottenere di chiamare jquery sul mio modello DOM, quando non so se il mio modello ha finito di essere creato. Il gestore onload non funziona neanche quando è definito nel modello del mio componente.

Ho letto su AfterViewInit, ma sono piuttosto sopraffatto da esso. Qualcuno potrebbe per favore spingermi nella giusta direzione?

Come posso sapere quando il template del mio componente è stato completamente inserito nel DOM “principale”?

I tag di script nei modelli di componenti vengono rimossi. Una soluzione alternativa consiste nel creare il tag script dynamicmente in ngAfterViewInit()

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

Vedi anche https://stackoverflow.com/a/9413803/217408

Un modo migliore potrebbe essere usare semplicemente require() per caricare lo script.

Vedi anche tag script in template angular2 / hook quando viene caricato template dom

Ho riscontrato lo stesso problema, ma in aggiunta dovevo caricare un numero di script, alcuni dei quali potevano essere caricati in parallelo e altri in serie. Questa soluzione funzionerà se si utilizza TypeScript 2.1 o versione successiva , che ha il supporto nativo per async / await e transpiles per 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) }) } 

Per tutti gli script che possono essere caricati in parallelo, puoi usufruire di 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") } 

Nota: per il rifiuto della promise, puoi provare a lavorare con scriptElement.onerror = reject nella funzione loadScript() , tuttavia, in questa situazione, ho riscontrato un comportamento loadScript() . Se vuoi che lo script continui a caricarsi, non importa cosa, potresti voler provare a risolvere le promesse quando viene chiamato onerror.