Nelle applicazioni Angular ci sono due opzioni per incorporare codice JavaScript personalizzato.
Una opzione è incorporare il codice direttamente nell'HTML, e l'altra soluzione migliore è creare un Componente.
Incorporare codice in qualsiasi parte della pagina
Questa è un'opzione familiare e il modo più semplice per procedere. Quindi, puoi semplicemente accedere all'HTML in uno qualsiasi dei tuoi file Angular e incollare direttamente il codice di EmbedSocial.
Ecco un esempio:
2. Creare un Componente
Ci sono due passaggi da seguire per realizzare ciò:
Creare il componente
Usare il componente
Nel terminale, usa il seguente comando
ng generate component EmbedSocialWidgetper creare un componente Angular chiamatoEmbedSocialWidgetDopo aver creato il componente, apri
EmbedSocialWidget.component.tse aggiungi una stringa decorata con@Input()chiamatarefIdproprio sopra il costruttore.Nello stesso file, all'interno della funzione
ngOnInit(), aggiungi il JavaScript di embedsocial, responsabile della costruzione del widget.
Il tuo file di componente EmbedSocialWidget.component.ts dovrebbe apparire come nell'immagine qui sotto:
Utilizzare il componente
Prima, accedi al tuo account EmbedSocial e vai su Widgets. Apri uno dei widget che desideri incorporare e ottieni il valore dell'attributo data-ref di EmbedSocial (come menzionato sopra).
L'attributo data-ref dovrebbe apparire così:
data-ref="1ca3d4d1a06e6fc2ae3b6b90f934326fd3a9edf4"
Una volta ottenuto il data-ref, puoi utilizzare liberamente il componente EmbedSocialWidget appena creato ovunque nel tuo progetto Angular. Modifica semplicemente il binding refId del componente con il refId che hai copiato da EmbedSocial in precedenza.
Ecco un esempio di utilizzo del componente:
Questo è tutto.
Spero che questo sia stato utile, e se hai domande o hai bisogno di assistenza, non esitare a contattare:
support@embedsocial.com