Javascript 如何将Calandly小部件嵌入Angular应用程序？

我正在尝试将小部件嵌入到Angular应用程序中，但不太确定如何实现这一点。因为我将使用变量数据调用这个小部件，所以我想使用用户激活的函数调用这个小部件。根据文档，我在我的组件中添加了以下方法：

getEventCalender() {
    Calendly.initInlineWidget({
      url: myVariable.url,
      parentElement: document.querySelector('.calendly-inline-widget'),
     });
  }

并使用以下命令调用它（在my.html中）

视图校准

我可以看出我需要.jsapi提供的

Calendly.initInlineWidget

方法，但是我不太确定如何访问它。我已经尝试下载文件并将其导入到我的组件中，但是它不起作用（可能我做得不正确）。我怀疑这与.js文件没有导出该方法有关，但不确定从这里可以走到哪里

---

有人能提供一些指导吗？

我们的vanilla JS应用程序也有类似的问题，并在他们的文档中找到了解决方案。为此，我们采取了以下措施：

将

数据自动加载=“false”

添加到

日历内联小部件
div

将

parentElement

添加到

initInlineWidget

函数参数

---

---

额外信息：@remy Bartolota我们发现了您描述的准确的

拆分
错误，上面的信息修复了它。
您检查过演示代码了吗：控制台中有哪些错误？帮助您的最好方法是提供一个快速示例。尝试在这里构建一些东西：你可以创建一个Angular应用程序，导入你需要的任何东西并共享。谢谢@gabrielstuff。是的，我试着简单地复制Plunker代码，小部件似乎间歇性地工作。我得到以下错误：uncaughttypeerror:Iframe.Calendly.Iframe.Iframe.parseOptions（widget.js:550）在新的Iframe（widget.js:530）在createInlineWidgets（widget.js:483）在widget.js:409在HTMLDocument.completed（widget.js:24）无法读取null属性“split”我将构建一个plunker示例并与大家分享…谢谢。。。然而，这是相关的，为了使这个函数起作用，我需要将Calendly声明为一个变量，如so
declare var Calendly:any。如果没有发生这种情况，则
initInlineWidget
方法将抛出一个错误。再次感谢您提供的信息
<div>
  <button (click)='getEventCalender()'>view cal</button>
</div>

<div class="calendly-inline-widget"></div>