Angular中的小部件Eventbrite

如何解决Angular中的小部件Eventbrite

要在eventbrite中进行签出，请在文档中使用扩展窗口的小部件（https://www.eventbrite.com/platform/docs/embedded-checkout），但是如何在angular中使用原始代码？我已经这样做了：

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中的checkout与angular集成在一起？

解决方法

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

  });

 } 

,

感谢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