Question

我想在我的Angular项目中嵌入booking.com地图小部件，但这不起作用。我认为是因为Angular在构建后会将这段代码转换为其他代码。嵌入代码如下：

Manipulated

如您所见，它应该是这样的：

https://jsfiddle.net/ypu64m2d/

但是在Angular中它不起作用：

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

我还尝试将脚本文件移到index.html <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">  <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>中，结果相同。

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

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地图小部件

1 个答案: