如何使用 Angular 12 嵌入 Calendly答案

【问题标题】：How to embed Calendly with Angular 12如何使用 Angular 12 嵌入 Calendly
【发布时间】：2021-07-28 12:13:02
【问题描述】：

我正在尝试将日历小部件嵌入到我的 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。

关于如何让日历正常工作有什么建议吗？

【问题讨论】：

blog.knoldus.com/… 这有帮助吗？
那是我最初使用的文章，但不幸的是它并没有为我解决问题。这篇文章描述了 2 种方法——我在上面描述的第一个复制方法（即 HTML 中的 div 和 index.html 中的脚本的方法）。第二个需要下载 Calendly 脚本文件，但这包含一个 Calendly 变量，然后我遇到了我在问题中提到的另一个问题，我再次得到“Cannot find name Calendly”。

标签： javascript html angular calendly

【解决方案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 not working in IE (Angular App)

【讨论】：

【解决方案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/assets/js/calendly.js 添加到 angular.json
中的 "scripts"
将脚本添加到 index.html
在组件的onInit部分调用shite

index.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: {}
      });
   }

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

【讨论】：