Не рендерит инстаграм, твиттер и прочие встроенные в угловые

Question

Я пытаюсь показать контент из Instagram, Twitter и других библиотек, которые позволяют встраивать в сайты.Проблема, с которой я столкнулся, заключается в том, что он только рендерит внедренный контент в первый раз, а затем, когда я возвращаюсь к тому же контенту, встраивание не отображается снова.: (

Это пример того, что происходит со мной: https://stackblitz.com/edit/angular-vcv94j (я добавляю библиотеку js в index.html)

Я нахожусьв тесте-1 встроенный контент рендерится, а когда я иду на тест-2, встроенный контент не рендерится

Какое решение может быть дано для этой проблемы ...?: S

Есть ликакой-нибудь способ вызвать события библиотек javascript снова?

Answer 1

Вы включаете embed.js в Instagram, который ищет определенные элементы в DOM и заменяет их на iframe элементы, которые встраивают сообщение.

Скрипт предлагает глобальную переменную под названием instgrm, которая разрешает доступна

instgrm.Embeds.process()

, что повторяет этот поиск.Вы можете вызывать это каждый раз, когда ваш компонент рендерит.

Я разветвил ваш пример и изменил его соответствующим образом, следуя двум различным подходам:

1. Вызов службы из компонентов
2. Использование директивы для элементов с атрибутом data-instgrm-permalink

Answer 2

замените <script async src="//www.instagram.com/embed.js"></script> на <script async src="https://www.instagram.com/embed.js"></script> и переместите эту строку кода в раздел index.html head

Answer 3

Если вы загружаете контент динамически (например, AJAX), эти службы встраивания обычно имеют метод JavaScript API, который вам нужно вызвать после вставки содержимого на страницу, чтобы отобразить сообщения.

Например, в Instagram есть window.instgrm.Embeds.process () , в Facebook - FB.XFBML.parse (); .

. Вы найдетечто-то похожее для Twitter и других социальных сетей.