So schließen Sie Handler an vorhandenes HTML mit Angular an

Ich schreibe eine Angular-Anwendung, die einige vorhandene HTML-Dokumente abruft und anzeigt.So schließen Sie Handler an vorhandenes HTML mit Angular an

Ich benutze einen Service, um große bereits existierende Dokumente (von einem Dritten) zu holen und sie in einem Panel anzuzeigen (mit innerHtml Bindung).

<div class='legal-doc-panel' [innerHtml]='doc'></div>

Dies funktioniert wie erwartet.

Die Anwendung, die ich schreibe, ergänzt die vorhandenen Dokumente mit zusätzlichen Informationen.

Ich möchte erkennen, wenn ein Benutzer über verschiedene Elemente im "importierten" HTML schwebt/klickt und zusätzlichen Inhalt in einem separaten Bereich anzeigt.

Im Wesentlichen möchte ich die Maus-Handler für einige Elemente, die ich in die Seite bringe (über innerHtml) haken und darauf reagieren.

Was ist der empfohlene/sauberste Weg, dies zu tun? Irgendwelche Vorschläge würden geschätzt.

Quelle

2017-11-24 raduw

Angular weiß nicht, was Sie in innerHtml eingeben. Sie können jedoch an dem Host-Element Ereignisse hören, die Angular hat bewusst:

<div class='legal-doc-panel' [innerHtml]='doc' (myEvent)="onMyEvent()"></div>

Und in Ihrem inneren html können Sie Ereignisse emittieren, wie Sie auf Komponenten mit EventEmitter tun würde. So etwas mag vielleicht sein:

var event = new CustomEvent("myEvent", { 
    someData: 'foo' 
}); 

hostElement.dispatchEvent(event);

Trotzdem würde ich vorschlagen, dass die sauberste Lösung ist, innerHtml überhaupt nicht zu verwenden. Stattdessen könnte Ihr Server Ihnen JSON geben und Sie können den HTML-Code mit Angular erstellen.

Wenn Sie keine Kontrolle über das eingefügte HTML haben, können Sie Vanilla JavaScript in Ihrem component.ts verwenden, nachdem Sie Ihren innerenHtml eingefügt haben. Suchen Sie einfach nach den Elementen in Ihrem div und verwenden Sie addEventListener() wie bei normalem JavaScript.

Quelle

2017-11-24 13:13:57 Mick

Vielen Dank für Ihren Vorschlag @Mick. Ich glaube nicht, dass Ihr Vorschlag dazu beitragen würde, das zu erreichen, was ich versuche zu erreichen. Ich muss kein benutzerdefiniertes Ereignis auslösen. Ich muss nur Browserereignisse (d. H. Klickereignisse) über bestimmte HTML-Elemente aus einem HTML-Teil erkennen, das ich NICHT kontrolliere (ein HTML, das ich auf meine Seite importiert habe). Außerdem kontrolliere ich nicht den Inhalt, der in innerHtml angezeigt wird, es ist ein Drittanbieter-Server, der Schnipsel von legalen Dokumenten als HTML bereitstellt, die ich mit den Informationen von meinem eigenen Server (der JSON-Daten zurückgibt) ergänzt. – raduw

Sie können nur Ereignisse auf Ihrem Host abhören. Nur die Chance ist außerhalb von Angular, sich in die Ereignisse von innerHtml einzuklinken und sie an den Host zu senden, so wie Sie es mit Komponenten tun würden, wie ich oben beschrieben habe. – Mick

Wenn Sie den Inhalt kennen, können Sie natürlich natives JavaScript verwenden. Nachdem Sie den inneren HTML-Code eingegeben haben, können Sie die Elemente durchsuchen und Ereignisse in Ihrer Komponente abhören. Achten Sie darauf, addEventListener() nicht bei jedem onChange zu verwenden. Ich habe meine Antwort bearbeitet, um das hinzuzufügen. – Mick

So schließen Sie Handler an vorhandenes HTML mit Angular an

Antwort

Verwandte Themen