TypeScript - Wie bekomme ich ein HTML-Element wie mit Dollarzeichen ($) in Javascript

Question

Ich habe den folgenden JavaScript-Code in meiner Seite, die ein Element mit der Klasse ".parallax" bekommen und ruft die Javascript-Methode "parallax()" . Offensichtlich muss ich dies tun, damit der Parallax-Effekt funktioniert.

Allerdings, wenn ich meine HTML-Elemente in der Komponentenvorlage in Typoskript-Datei verwenden, muss ich es aus der TS-Datei aufzurufen.

Also, wie kann ich dieses Element durch seinen Klassennamen und rufen Sie die Javascript-Methode in Typescript-Datei?

---

Obs .: Ich habe bereits versucht, dies zu tun:

var element = <HTMLElement> document.getElementsByClassName('parallax')[1]; 
element.parallax(); 

Aber der Compiler erkennt nicht die Methode "Parallaxe()", warnt mich diese:

TS2339: Property 'parallax' does not exist on type HTMLElement

Answer 1

Vielen Dank für Ihre Hilfe, @basarat! Ich folgte Ihren Tipps, aber ich brauchte mehr Informationen, damit es funktioniert!

Mein erstes Problem war das $ (Dollar) Zeichen zu verwenden, und ich löste es dies, indem:

import * as $ from 'jquery';

---

Der Import oben ist die richtige Antwort auf meine Hauptfrage Hier. Es war jedoch nicht genug, um die externe Javascript-Funktion .parallax() zu funktionieren. Ich werde unten zeigen, was ich getan habe, um zu arbeiten, ob jemand diese Antwort auch braucht.

Ich folgte einige Tipps aus diesem StackOverflow answer.

Wie basarat sagte, habe ich eine Datei parallax.d.ts genannt, jedoch mit folgenden Schnittstelle:

interface JQuery { 
    parallax():JQuery; 
} 

Dann verwies beid Parallaxe und jquery Dateien auf meine Komponente landingPage.view.ts Datei:

///<reference path="../../../typings/browser/ambient/jquery/index.d.ts"/> 
///<reference path="../../shared/parallax.d.ts"/> 

und dann bearbeitet meine Komponente Klasse zu diesem:

export class AppLandingPage implements AfterViewInit { 
    static landingPageInitialized = false; 

    constructor(private el:ElementRef) { 
    } 

    ngAfterViewInit() { 
     if(!AppLandingPage.landingPageInitialized) { 
      jQuery(this.el.nativeElement) 
       .find('.parallax') 
       .parallax(); 
      AppLandingPage.landingPageInitialized = true; 
     } 
    }; 
} 

nun von meinem Verständnis ist der Konstruktor der Komponente durch die Referenzierung el Variable, verwende ich dieses Element in jQuery, finden die Komponenten mit der ".parallax" Klasse und rufen Sie die Funktion parallax() die Parallaxe Rahmen zu machen, in JS zum Ausführen.

Ich bin nicht sicher, ob ich alles so erklären werde, wie es ist, aber jetzt funktioniert es! Hehe

Nochmals vielen Dank für Ihre Hilfe!

Answer 2

$('.parallax').parallax();

Wenn parallax eine JQuery-Funktion ist, benötigen Sie parallax.d.ts:

interface JQuery { 
    parallax: any; 
} 

Und ich bin mir ziemlich sicher, dass dies das ist, was Sie wollen.