Komponenta Angular 4: volání kódu JavaScript/jQuery z jiného souboru

Mám kód jQuery, který se spouští v ngAfterViewInit()

//myComponent.ts
ngAfterViewInit() {
    $(function () {
    $('#myElement').click(function (e) {
        //code working fine here
    });
}

ale chci to přesunout do externího myScripts.js, aby se komponenta zjednodušila

pokusil jsem se přesunout kód do externího souboru a pak použít import, ale to způsobí, že se skript zavolá jen jednou, takže pokud se přesuji do dětského komponentu (který smaže HTML element myElement s definovanou událostí onclick) a pak zpět do rodičovského komponentu, myElement se vrátí, ale bez události onclick

tak otázek je:

jaká je nejlepší praxe při použití jQuery/JavaScriptu s Angular4

Odpověď č. 1

Musíte exportovat svou funkci z myScripts.ts a poté ji importovat a zavolat uvnitř ngAfterViewInit().

Po správném exportu byste měli být schopni udělat:

// app.ts
import { myInitFunc } from './myScripts';

ngAfterViewInit() {
  myInitFunc();
}

// myScripts.ts
export function myInitFunc(): void {
  $(function () {
    $('#myElement').click(function (e) {
      //do stuff
    });
  }
};

Podívejte se na export: https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export