如何使用 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 中将 data-auto-load="false" 添加到 div，但我收到错误消息“无法找到名称 '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'),
  });
}

感谢此处评论

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/assets/js/calendly.js添加到angular.json[=51=中的"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: {} }); }

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

如何使用 Angular 12 嵌入 Calendly

How to embed Calendly with Angular 12

html

javascript

calendly

angular

index.html

calendly.component.html

calendly.component.ts