In Angular-Anwendungen gibt es zwei Optionen, um benutzerdefinierten JavaScript-Code einzubetten.
Eine Option ist, den Code direkt in das HTML einzufügen, und die andere, bessere Lösung ist, eine Komponente zu erstellen.
Code irgendwo auf der Seite einbetten
Dies ist eine vertraute Option und der einfachste Weg. So können Sie einfach auf das HTML in einer Ihrer Angular-Dateien zugreifen und den EmbedSocial-Code direkt einfügen.
Hier ist ein Beispiel:
2. Eine Komponente erstellen
Es gibt zwei Schritte, die Sie befolgen müssen, um dies zu erreichen:
Die Komponente erstellen
Die Komponente verwenden
Verwenden Sie im Terminal den folgenden Befehl
ng generate component EmbedSocialWidget, um eine Angular-Komponente namensEmbedSocialWidgetzu erstellen.Nachdem die Komponente erstellt wurde, öffnen Sie
EmbedSocialWidget.component.tsund fügen Sie eine mit@Input()dekorierte Zeichenkette namensrefIddirekt über dem Konstruktor hinzu.In derselben Datei fügen Sie innerhalb der Funktion
ngOnInit()das JavaScript von EmbedSocial hinzu, das für den Aufbau des Widgets verantwortlich ist.
Ihre Komponentendatei EmbedSocialWidget.component.ts sollte wie das Bild unten aussehen:
Die Komponente verwenden
Zuerst loggen Sie sich in Ihr EmbedSocial-Konto ein und gehen zu Widgets. Öffnen Sie eines der Widgets, das Sie einbetten möchten, und holen Sie sich den Wert des EmbedSocial data-ref-Attributs (wie oben erwähnt).
Das data-ref-Attribut sollte so aussehen:
data-ref="1ca3d4d1a06e6fc2ae3b6b90f934326fd3a9edf4"
Sobald Sie das data-ref haben, können Sie die neu erstellte EmbedSocialWidget-Komponente frei in Ihrem Angular-Projekt verwenden. Bearbeiten Sie einfach die refId-Bindung der Komponente mit dem refId, das Sie zuvor von EmbedSocial kopiert haben.
Hier ist ein Beispiel, wie die Komponente verwendet wird:
Das ist alles.
Ich hoffe, das war hilfreich, und wenn Sie Fragen haben oder Hilfe benötigen, zögern Sie nicht, Kontakt aufzunehmen:
support@embedsocial.com