angular - 可以使用 ngOnInit 初始化 booking.com 表单 1 次，但不能再次初始化

Question

因此，我在 angular4 中使用了 Angular Material ，并将 booking.com 表单的 html 放入 MdDialogue 组件中。当有人按下按钮时，我希望这个对话框弹出其中的表单。它在应用程序加载后按预期工作 1 次，但不会再次出现。我希望它每次都能工作。没有错误消息，所以我不清楚为什么会这样。 booking() 中的逻辑初始化表单。

booking.com 表单的 html 如下所示。

<ins class="bookingaff" data-aid="1179852" data-target_aid="1179846" data-prod="nsb" data-width="100%" data-height="auto">
  <!-- Anything inside will go away once widget is loaded. -->
  <a href="//www.booking.com?aid=1179846">Booking.com</a>
</ins>

这是 booking.com 组件的样子...

...
     openBookings(){
        let dialogRef = this.dialog.open(Booking_com);
        dialogRef.afterClosed().subscribe(result => {
        });
      }

      debug(data){
        console.log(data);
      }



    }

    @Component({
      selector: 'Booking_com',
      templateUrl: 'Booking_com.html',
      styleUrls: ['Booking_com.sass']
    })
    export class Booking_com implements AfterViewInit{


      ngAfterViewInit(): void {
        this.booking();
      }

      constructor(public dialogRef: MdDialogRef<Booking_com>) {}


      booking(){
        (function(d, sc, u) {
          var s:any =  d.createElement(sc);
          var p:any =  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');
      }
    }

图像显示它第一次有效，但第二次无效......任何关于为什么会发生这种情况以及如何解决这个问题的想法都会很好。

Answer 1

检查 affiliate script我们可以看到，当这个脚本被加载时，它调用了一次 BookingAff.run() 函数，它看起来像:

function u() {
  if (_i_("5fc:14"), u.already_ran) return _r_();
  u.already_ran = !0;

如果 already_ran 标志已经设置，它会退出。所以我们需要在每次打开模式时取消设置:

// reset already_ran flag
if (window.BookingAff && window.BookingAff.run.already_ran) {
  window.BookingAff.run.already_ran = false;
}

由于这两个原因，预订表单仅在第一个模式打开时呈现一次。

还有一个来源检查，它只允许booking.com 或bstatic.com 来源:

var r, i = new RegExp("(booking|bstatic).com$");
if (!e.origin.match(i)) return _r_();

所以我们不能只在从我们的域打开的每个模式上运行 BookingAff.run()。

最简单的解决方案是在每个模式打开时调用 booking() 函数(当然，在重置 already_ran 标志之后)。

笨蛋:https://plnkr.co/edit/IlAa7XJDjQIxd6IgKXIe?p=preview

我的 plunker 说有一个 JS 错误

ERROR Error: The selector "dialog-overview-example-dialog" did not match any elements

它来自 https://material.angular.io/components/component/dialog 处的原始 Google 示例和他们的 plunker 链接