In Angular applications there are two options when embedding custom javascript code.
One option is to embed the code directly in the html, and the other better solution is by creating a Component.
1. Intégration de code n'importe où dans la page
C'est une option familière et la façon la plus facile de procéder. Ainsi, vous pouvez simplement accéder au HTML dans n'importe lequel de vos fichiers Angular et coller directement le code EmbedSocial.
Voici un example :
2. Création d'un Composant
Il y a deux étapes à suivre pour y parvenir :
Créer le composant
Utiliser le composant
Dans le terminal, utilisez la commande suivante
ng generate component EmbedSocialWidgetpour créer un composant angular nomméEmbedSocialWidgetAprès la création du composant, ouvrez
EmbedSocialWidget.component.tset ajoutez une chaîne décorée avec@Input()appeléerefIdjuste au-dessus du constructeur.Dans ce même fichier, à l'intérieur de la fonction
ngOnInit(), ajoutez le JavaScript de embedsocial, responsable de la construction du widget.
Votre fichier de composant EmbedSocialWidget.component.ts devrait ressembler à l'image ci-dessous :
3. Utilisation du composant
D'abord, connectez-vous à votre compte EmbedSocial et allez à Widgets. Ouvrez l'un des widgets que vous souhaitez intégrer et obtenez la valeur de l'attribut data-ref de EmbedSocial (comme mentionné ci-dessus).
L'attribut data-ref devrait ressembler à ceci :
data-ref="1ca3d4d1a06e6fc2ae3b6b90f934326fd3a9edf4"
Une fois que vous avez le data-ref, vous pouvez utiliser librement le composant EmbedSocialWidget créé récemment n'importe où dans votre projet Angular. Modifiez simplement la liaison refId du composant avec le refId que vous avez copié de EmbedSocial auparavant.
Voici un exemple d'utilisation du composant :
C'est tout.
J'espère que cela a été utile, et si vous avez des questions ou besoin d'assistance, n'hésitez pas à contacter:
support@embedsocial.com