Angular 中的小部件 Eventbrite

Question

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

1. 将<script src="https://www.eventbrite.com/static/widgets/eb_widgets.js"></script>放入index.html
2. 使用按钮<button id="eventbrite-widget-trigger" type="button">Buy Tickets</button> 创建组件
3. 使用小部件配置创建一个 .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

感谢Abderrahim Soubai-Elidrisi我解决了我的问题：

在文件 angular.json 的 scripts 数组中添加脚本

按照本文中的步骤操作：How to call JavaScript functions from Typescript in Angular 5?

1. 在文件夹中创建文件：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();
    }

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

Answer 2

你可以使用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

  });

 }