所以我使用角度材料和angular4,我已经在一个MdDialogue组件中放入了html for booking.com表格.当有人按下按钮时,我希望这个对话框弹出窗体内部的形式.应用程序加载后,它会按预期工作一次,但不会再次.我希望每次都能工作.没有错误消息,因此我不清楚为什么会发生这种情况. 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'); } }
检查
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()函数(当然,在重置yet_ran标志后).
plunker:https://plnkr.co/edit/IlAa7XJDjQIxd6IgKXIe?p=preview
我的掠夺者说有一个JS错误
ERROR Error: The selector “dialog-overview-example-dialog” did not match any elements
它来自最初的谷歌在https://material.angular.io/components/component/dialog的例子和他们的plunker链接