如何在 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