如何在 Angular 12 中嵌入 Calendly

Question

我正在尝试将日历小部件嵌入到我的 angular 应用程序中，但我发现它无法始终如一地工作。

首先，我将此行添加到组件的 HTML 中：

<div class="calendly-inline-widget" data-url="https://calendly.com/my-calendar-link" style="min-width:320px;height:630px;"></div>

这行到 index.html：

<script src="https://assets.calendly.com/assets/external/widget.js" async></script>

这最初有效，但每当页面重新加载时，嵌入的日历就会消失。

通过阅读 Calendly 文档中的高级嵌入选项，我尝试了一种稍微不同的方法，其中我的ngOnInit()函数如下所示：

ngOnInit(): void {
  Calendly.initInlineWidget({
    url: 'https://calendly.com/my-calendar-link',
    parentElement: document.querySelector('.calendly-inline-widget'),
  });
}

我还在 HTML 的 div 中添加了data-auto-load="false" ，但我收到错误消息“找不到名称‘Calendly’”，我不确定应该从哪里声明或导入 Calendly。

关于如何让日历工作的任何建议？

Answer 1

通过添加以下内容，我设法使其正常工作：

export {}; declare global { interface Window { Calendly: any; } }

然后将ngOnInit()更改为：

ngOnInit(): void {
  window.Calendly.initInlineWidget({
    url: 'https://calendly.com/my-calendar-link',
    parentElement: document.querySelector('.calendly-inline-widget'),
  });
}

在这里发表评论Calendly Widget 在 IE (Angular App) 中不起作用

Answer 2

这在重新加载页面时仍然给我错误，所以我既不是专家 Angular 也不是 Javascript 开发人员，根据已经给出的有用答案做了一个丑陋的解决方法，以强制 Calendly 对象在我需要时总是在那里。 我会把它留在这里，它可能对谁有用。

将外部 javascript 文件https://assets.calendly.com/assets/external/widget.js复制到src/assets/js/calendly.js

删除了隐式匿名函数调用并将整个该死的东西包装在一个命名函数中 - 不会立即调用，如下所示：

 function preInitCalendly() { console.debug('Calendly pre-initialization for ' + this); this.Calendly = {}; this.Calendly._util = {}; Calendly._util.domReady = function(callback) { ... }; ... and the rest, all the way to the end of the file ... }

删除了最后的Calendly._autoLoadInlineWidgets()
新增的src /资产/ JS / calendly.js的"scripts"在angular.json
将脚本添加到index.html
在组件的onInit部分调用shite

索引.html

...
<head>
   ...
   <script async src="assets/js/calendly.js"></script>
</head>
...

calendly.component.html

<div class="calendly-inline-widget" data-auto-load="false"></div>

calendly.component.ts

export {};
declare global {
   interface Window {
      Calendly: any;
   }
}
declare var preInitCalendly: Function;

@Component({
   selector: 'app-calendly',
   templateUrl: './calendly.component.html',
   styleUrls: ['./calendly.component.css']
})
export class CalendlyComponent implements OnInit {
   url = 'https://calendly.com/my_calendly_location';

   constructor() {
   }

   ngOnInit(): void {
      preInitCalendly();
      window.Calendly.initInlineWidget({
         url: this.url,
         parentElement: document.querySelector('.calendly-inline-widget'),
         prefill: {}
      });
   }

它并不漂亮，但似乎工作可靠。

如何在 Angular 12 中嵌入 Calendly

问题描述

2 个解决方案

解决方案1
0 已采纳 2021-07-28 13:06:47

解决方案2
0 2021-11-04 10:58:06

索引.html

calendly.component.html

calendly.component.ts

如何在 Angular 12 中嵌入 Calendly

问题描述

2 个解决方案

解决方案1 0 已采纳 2021-07-28 13:06:47

解决方案2 0 2021-11-04 10:58:06

索引.html

calendly.component.html

calendly.component.ts

解决方案1
0 已采纳 2021-07-28 13:06:47

解决方案2
0 2021-11-04 10:58:06