Angular 2+ |嵌入 booking.com 地图小部件

Question

我想在我的 Angular 项目中嵌入 booking.com 地图小部件，但这不起作用。我假设是因为 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>中移动脚本文件，结果一样。

有谁知道如何解决这个问题？

Answer 1

尝试将其直接包含在组件中。我尝试使用应用程序组件并且它有效。您可以创建一个单独的组件来执行这段代码。

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');
  }
}

Angular 2+ |嵌入 booking.com 地图小部件

Angular 2+ | Embedding booking.com map widget

embed

external

angular