Угловой 2+ |Встраивание виджета карты booking.com - PullRequest
Новая
       29

Угловой 2+ |Встраивание виджета карты booking.com

0 голосов
/ 31 января 2019

Я хочу встроить виджет карты booking.com в мой проект Angular, но это не работает.Я предполагаю, потому что Angular преобразует этот код во что-то еще после сборки.Код для встраивания выглядит следующим образом: 

<ins class="bookingaff" data-aid="0000" data-target_aid="0000" data-prod="map" data-width="100%" data-height="590" data-lang="ualng" data-dest_id="0" data-dest_type="landmark" data-latitude="35.6894875" data-longitude="139.6917064" data-mwhsb="0" data-checkin="2019-05-20" data-checkout="2019-05-21">
    <!-- Anything inside will go away once widget is loaded. -->
    <a href="//www.booking.com?aid=0000">Booking.com</a>
</ins>
<script type="text/javascript">
   (function(d, sc, u) {
      var s = d.createElement(sc), p = d.getElementsByTagName(sc)[0];
      s.type = 'text/javascript';
      s.async = true;
      s.src = u + '?v=' + (+new Date());
      p.parentNode.insertBefore(s,p);
    })(document, 'script', '//aff.bstatic.com/static/affiliate_base/js/flexiproduct.js');
</script>

Как вы можете видеть, он должен выглядеть следующим образом:

https://jsfiddle.net/ypu64m2d/

Но в Angular он не работает:

https://stackblitz.com/edit/angular-yxbg1d?file=src/app/app.component.html

Я также пытался переместить файл сценария в index.html <head>, тот же результат.

Кто-нибудь знает, как к этому подойти?

1 Ответ

0 голосов
/ 31 января 2019

Попробуйте включить его непосредственно в компонент.Я попробовал с компонентом приложения, и это сработало.Вы можете создать отдельный компонент для выполнения этого фрагмента кода. 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular';

  ngOnInit(){
     (function(d, sc, u) {
      var s = d.createElement(sc), p = d.getElementsByTagName(sc)[0];
      s.type = 'text/javascript';
      s.async = true;
      s.src = u + '?v=' + (+new Date());
      p.parentNode.insertBefore(s,p);
      })(document, 'script', '//aff.bstatic.com/static/affiliate_base/js/flexiproduct.js');
  }
}
...