如何用角度12嵌入Calendly
我正在尝试将一个日历小部件嵌入到我的角度应用程序中，但我发现它的工作并不一致。
首先，我将这一行添加到组件的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文档中的Advanced选项，我尝试了一种稍微不同的方法，其中我的ngOnInit()函数如下所示：
ngOnInit(): void {
Calendly.initInlineWidget({
url: 'https://calendly.com/my-calendar-link',
parentElement: document.querySelector('.calendly-inline-widget'),
});
}我还将data-auto-load="false"添加到HTML中的div中，但我得到了“无法找到名称' Calendly '”的错误消息，我不确定Calendly应该从哪里声明或导入。
关于如何让日历正常工作，有什么建议吗？
回答 2
Stack Overflow用户
发布于 2021-07-28 13:06:47
通过添加以下内容，我成功地做到了这一点：
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'),
});
}Stack Overflow用户
发布于 2021-11-04 10:58:06
这仍然让我在重新加载页面时出错，所以我，既不是专家，也不是Javascript开发人员，基于已经给出的有帮助的答案，做了一个丑陋的解决方案，以迫使Calendly对象在我需要的时候总是在那里。我把它放在这里，对谁有用。
src/assets/js/calendly.js
- 将外部javascript文件复制到
- 删除了隐式匿名函数调用，并将所有该死的内容封装在一个命名函数中--而不是立即调用，如下所示：
函数preInitCalendly() { console.debug('Calendly预初始化for‘+ this)；this.Calendly = {}；this.Calendly._util = {}；Calendly._util.domReady =函数(回调){. }；剩下的，一直到文件的末尾. }
Calendly._autoLoadInlineWidgets()
- 移除了最终的
angular.json中的"scripts"添加了src/
- /js/calendly.js
- 将脚本添加到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: {}
});
}它不漂亮，但它似乎工作可靠。
https://stackoverflow.com/questions/68560195
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号