Get modal Element in Angular 2 Typoskript

Question

Wie verwenden Sie document.getElementById, um ein modales Element zu erhalten? Ich versuche manuell einen Modal-Via-Code in meiner Home-Komponenten-Typoskript-Datei anzuzeigen und auszublenden.

Ich habe bereits ein funktionierendes Modal, das funktioniert, wenn eine Taste gedrückt wird - jetzt möchte ich das Modal manuell umschalten, wenn bestimmte Bedingungen im Code auftreten.

ich habe:

var errorModalBox = document.getElementById("errorModal"); 
errorModalBox.modal('show'); 

jedoch die zweite Zeile führt den folgenden Fehler:

Property 'modal' does not exist on type 'HTMLElement'. 

Answer 1

Als Ihr Fehler erklärt, die "modal" Eigenschaft existiert nicht auf dem "Htmlelement". Dies liegt daran, dass Sie einen Verweis auf das HTML-Element mit reinem JavaScript und nicht mit JQuery erhalten. Jquery fügt zusätzliche Methoden hinzu, wenn HTML-Elemente referenziert werden. Bootstrap JS fügt dem jQuery-Objekt zusätzliche Methoden und Eigenschaften hinzu; Eine davon ist die "modale" Methode.

Da Sie Typescript mit Angular 2 verwenden, löst der Typskript-Compiler einen Fehler aus, wenn Sie mit "$" oder "jQuery" auf das jQuery-Objekt verweisen. Um den Kompilierungsfehler zu beheben, fügen Sie diese Anweisung unterhalb der letzten Importanweisung in Ihrer Home-Komponente hinzu.

declare var $:any; 

Dann ändern Sie einfach den Code aus:

var errorModalBox = document.getElementById("errorModal"); 
errorModalBox.modal('show'); 

An:

$('#errorModal').modal('show');