Не удается выполнить скрипт баннера PayPal в Angular 4 - PullRequest
Новая
       13

Не удается выполнить скрипт баннера PayPal в Angular 4

0 голосов
/ 24 мая 2018

Я пытаюсь интегрировать баннер PayPal в мое приложение Angular 4.У меня есть этот скрипт ниже. 

<script type="text/javascript" data-pp-payerid="XXXXXXXXXX" data-pp-placementtype="728x90" data-pp-style="BLUWHTYLRG">
    (function (d, t) {
        "use strict";
        var s = d.getElementsByTagName(t)[0], n = d.createElement(t);
      n.src="//www.paypalobjects.com/upstream/bizcomponents/js/merchant.js";
        s.parentNode.insertBefore(n, s);
    }(document, "script"));
</script>

Этот код работает хорошо, если помещен только внутри тега body, но из любых компонентов он не работает, так как angular удаляет тег script из тела шаблона.Пожалуйста, помогите

1 Ответ

0 голосов
/ 24 мая 2018

Я не уверен, почему вы не можете использовать <script> внутри компонента, но это, скорее всего, по соображениям безопасности или AoT.В любом случае, это плохая практика для компонента Angular.

У меня нет для вас реального решения, но я бы попробовал это.

В шаблон вашего компонента добавьте элемент для храненияАтрибут данных и предоставьте ему ссылку #target. 

<span #target data-pp-payerid="XXXXXXXXXX" data-pp-placementtype="728x90" data-pp-style="BLUWHTYLRG">

Теперь вы можете получить доступ к этому элементу DOM через атрибут @ViewChild. 

@ViewChild('target')
public target: ElementRef;

Теперь просто вставьте <script> элемент для загрузки merchant.js. 

public OnInit() {
    const n = document.createElement('script');
    n.src="//www.paypalobjects.com/upstream/bizcomponents/js/merchant.js";
    this.target.nativeElement.appendChild(n);
}

Я не уверен, что это будет работать.Я не понимаю, как merchant.js может читать атрибуты из родительского узла в DOM.Когда скрипт загружается, у него нет ссылки на оригинальный тег <script>, который его загрузил.

Редактировать:

Этот ответ может быть обновлен для использованияDocument для инъекций и сервис Render2 для поддержки рендеринга на стороне сервера.

...