Angular 中的小部件 Eventbrite

Question

要在 eventbrite 中进行结帐，在文档中使用扩展 window (https://www.eventbrite.com/platform/docs/embedded-checkout) 的小部件，但是如何在 angular 中使用原始代码？，我已经完成了这个：

将<script src="https://www.eventbrite.com/static/widgets/eb_widgets.js"></script>放入index.html
使用按钮创建组件 <button id="eventbrite-widget-trigger" type="button">Buy Tickets</button>
使用小部件配置创建 .ts：

    const eventbriteCallback = function () {
      console.log("Order complete!");
    };
    
    window.EBWidgets.createWidget({
      widgetType: "checkout",
      eventId: "52766401728",//Here is event dinamically
      modal: true,
      modalTriggerElementId: "eventbrite-widget-trigger",
      onOrderComplete: eventbriteCallback,
    });

但是如何将原始代码（第 3 点）与组件（第 2 点）合并并动态发送 eventId？或者有人在 eventbrite 中集成了结帐 angular?

Answer 1

可以使用NgZone实现例如：

在 AppComponent 中：

import { NgZone} from '@angular/core'; // import

在构造函数中：

 constructor(private _ngZone: NgZone) {

 this._ngZone.runOutsideAngular(() => {

 window.EBWidgets // put your code that will be executed outside of angular

  });

 }

Answer 2

谢谢Abderrahim Soubai-Elidrisi我这样做解决了我的问题：

add the script in the scripts array of the file angular.json

已按照此 post 中的步骤操作：

在文件夹中创建文件：src/assets/js/eventbrite/register.js，这里放：

    function registerEvent(eventId, action) {
      const button = document.createElement("button");
      button.setAttribute("id", "example-widget-trigger");
      button.setAttribute("type", "button");
      document.body.appendChild(button);
      button.style.display = "none";
      setTimeout(() => {
        document.body.removeChild(button);
      }, 200);
    
      window.EBWidgets.createWidget({
        widgetType: "checkout",
        eventId: eventId,
        modal: true,
        modalTriggerElementId: "example-widget-trigger",
        onOrderComplete: action,
      });
    
      button.click();
    }

在 angular.json 中搜索 projects.architect.scripts 并添加 src/assets/js/eventbrite/register.js to array scripts
调用函数，导入后：声明function registerEvent(eventId, action): void;
致电registerEvent(eventId, exampleCallback); Show steps 3 and 4

Angular 中的小部件 Eventbrite

Widget Eventbrite in Angular

eventbrite

angular