如何在 Angular 12 中嵌入 Calendly
[英]How to embed Calendly with Angular 12
问题描述
I'm trying to embed a calendly widget into my angular app, but I find that it doesn't work consistently.
我正在尝试将日历小部件嵌入到我的 angular 应用程序中，但我发现它无法始终如一地工作。
Firstly I add this line to my component's HTML:首先，我将此行添加到组件的 HTML 中：
<div class="calendly-inline-widget" data-url="https://calendly.com/my-calendar-link" style="min-width:320px;height:630px;"></div>
and this line to the index.html:这行到 index.html：
<script src="https://assets.calendly.com/assets/external/widget.js" async></script>
This works initially but then the embedded calendar vanishes whenever the page reloads.这最初有效，但每当页面重新加载时，嵌入的日历就会消失。
By reading the Advanced Embed Options in Calendly's documentation, I attempted a slightly different approach, where my ngOnInit() function looks like this:通过阅读 Calendly 文档中的高级嵌入选项，我尝试了一种稍微不同的方法，其中我的ngOnInit()函数如下所示：
ngOnInit(): void {
Calendly.initInlineWidget({
url: 'https://calendly.com/my-calendar-link',
parentElement: document.querySelector('.calendly-inline-widget'),
});
}
and I've also added data-auto-load="false" to the div in the HTML, but I get the error message "Cannot find name 'Calendly'" and I'm unsure where Calendly should be declared or imported from.我还在 HTML 的 div 中添加了data-auto-load="false" ，但我收到错误消息“找不到名称‘Calendly’”，我不确定应该从哪里声明或导入 Calendly。
Any suggestions on how I can get the calendar working?关于如何让日历工作的任何建议？
2 个解决方案
解决方案1
0 已采纳 2021-07-28 13:06:47
I've managed to get this working by adding the following:通过添加以下内容，我设法使其正常工作：
export {}; declare global { interface Window { Calendly: any; } }
and then changing ngOnInit() to :然后将ngOnInit()更改为：
ngOnInit(): void {
window.Calendly.initInlineWidget({
url: 'https://calendly.com/my-calendar-link',
parentElement: document.querySelector('.calendly-inline-widget'),
});
}
Credit to comment here Calendly Widget not working in IE (Angular App)在这里发表评论Calendly Widget 在 IE (Angular App) 中不起作用
解决方案2
0 2021-11-04 10:58:06
This still gave me errors when reloading the page, so I, not being either an expert Angular nor Javascript developer, did an ugly workaround based on the helpful answer already given in order to force the Calendly object to always be there when I need it.这在重新加载页面时仍然给我错误，所以我既不是专家 Angular 也不是 Javascript 开发人员，根据已经给出的有用答案做了一个丑陋的解决方法，以强制 Calendly 对象在我需要时总是在那里。 I'll leave it here for whom it might be useful for.我会把它留在这里，它可能对谁有用。
Copied the external javascript file https://assets.calendly.com/assets/external/widget.js to
src/assets/js/calendly.js将外部 javascript 文件https://assets.calendly.com/assets/external/widget.js复制到src/assets/js/calendly.jsRemoved the implicit anonymous function call and wrapped the whole damned thing in a named function - not called immediately, like so:
删除了隐式匿名函数调用并将整个该死的东西包装在一个命名函数中 - 不会立即调用，如下所示：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 ... }Removed the final
Calendly._autoLoadInlineWidgets()删除了最后的Calendly._autoLoadInlineWidgets()Added src/assets/js/calendly.js to the
"scripts"in angular.json新增的src /资产/ JS / calendly.js的"scripts"在angular.jsonAdded the script to index.html
将脚本添加到index.htmlCall the shite in the onInit part of the component
在组件的onInit部分调用shite
index.html索引.html
...
<head>
...
<script async src="assets/js/calendly.js"></script>
</head>
...
calendly.component.html calendly.component.html
<div class="calendly-inline-widget" data-auto-load="false"></div>
calendly.component.ts 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: {}
});
}
It's not pretty, but it seems to be working reliably.它并不漂亮，但似乎工作可靠。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.