Em aplicações Angular existem duas opções ao incorporar código JavaScript personalizado.
Uma opção é incorporar o código diretamente no HTML, e a outra, melhor solução, é criar um Componente.
Incorporando código em qualquer lugar da página
Esta é uma opção familiar e a maneira mais fácil de prosseguir. Assim, você pode simplesmente acessar o HTML em qualquer um dos seus arquivos Angular e colar o código da EmbedSocial diretamente.
Aqui está um exemplo:
2. Criando um Componente
Há dois passos que você precisa seguir para conseguir isso:
Criar o componente
Usar o componente
No terminal, use o seguinte comando
ng generate component EmbedSocialWidgetpara criar um componente angular chamadoEmbedSocialWidgetApós a criação do componente, abra
EmbedSocialWidget.component.tse adicione uma string decorada com@Input()chamadarefIdlogo acima do construtor.No mesmo arquivo, dentro da função
ngOnInit(), adicione o JavaScript da embedsocial, responsável por construir o widget.
Seu arquivo de componente EmbedSocialWidget.component.ts deve parecer com a imagem abaixo:
Usando o componente
Primeiro, faça login na sua conta EmbedSocial e vá para Widgets. Abra um dos widgets que você deseja incorporar e obtenha o valor do atributo data-ref da EmbedSocial (como mencionado acima).
O atributo data-ref deve parecer com isso:
data-ref="1ca3d4d1a06e6fc2ae3b6b90f934326fd3a9edf4"
Uma vez que você tenha o data-ref, você pode usar o componente EmbedSocialWidget recém-criado livremente em qualquer lugar dentro do seu projeto Angular. Apenas edite a vinculação refId do componente com o refId que você copiou da EmbedSocial antes.
Aqui está um exemplo de como usar o componente:
É isso.
Espero que isso tenha sido útil, e se você tiver perguntas ou precisar de assistência, sinta-se à vontade para entrar em contato com: