角小部件Eventbrite

Question

要在eventbrite中进行签出，在文档中使用一个扩展窗口的Widget (https://www.eventbrite.com/platform/docs/embedded-checkout)，但是如何在角中使用普通代码呢?我已经这样做了：

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中集成了结账？

Answer 1

谢谢阿伯德拉姆·苏拜-埃里迪，我解决了这个问题：

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

遵循本文中的步骤：如何从第5角的打字本中调用JavaScript函数？

1. 在文件夹中创建文件:src/assets/js/eventbrite/Regier.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/projects.architect.scripts/js/eventbrite/Register.js 数组脚本
2. 要调用函数，在导入之后:声明function registerEvent(eventId, action): void;
3. 呼叫registerEvent(eventId, exampleCallback); 显示步骤3和步骤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

  });

 }