时间戳

首页 > 解决方案 > Angular 12 中的 Dropbox 嵌入器

angular - Angular 12 中的 Dropbox 嵌入器

问题描述

我想在 Angular 组件中显示Dropbox 嵌入器。我能够展示它，但它只能在没有防护和导航到组件后刷新浏览器的情况下工作。

 this.router.navigate(['/files']).then(() => {
        window.location.reload();
      });

我在 index.html 中包含了 Dropbox 嵌入脚本

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <title>Dropbox files</title>
        <base href="/" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" type="image/x-icon" href="favicon.ico" />
        <link
          href="https://fonts.googleapis.com/icon?family=Material+Icons"
          rel="stylesheet"
        />
        <script
          type="text/javascript"
          src="https://www.dropbox.com/static/api/2/dropins.js"
          id="dropboxjs"
          data-app-key="dropboxkey"
        ></script>
      </head>
      <body>
        <app-root></app-root>
      </body>
    </html>

而且文件组件只有 Dropbox 嵌入代码

<a
  href="https://www.dropbox.com/sh/rsc2ecvsiyacmfe/iuiuhjhjhkjkjhkjhkjh_e9a?dl=0"
  class="dropbox-embed"
  data-height="100vh"
  >Folder</a
>

我想知道是否有另一种方法可以在没有页面刷新和角度保护的情况下使用嵌入器。我不想使用 Dropbox API，因为嵌入器在我的情况下是完美的。

谢谢！

编辑：我能够使用这种方式加载 JS 文件

现在它仅在组件第一次加载时才有效，如果您导航到另一个组件并导航回文件控制台显示

zone.js:182 Uncaught Error: iframe does not contain a contentWindow
    at VM4414 dropins.js:2
    at t (VM4414 dropins.js:2)
    at ZoneDelegate.invokeTask (zone.js:406)
    at Zone.runTask (zone.js:178)
    at ZoneTask.invokeTask [as invoke] (zone.js:487)
    at invokeTask (zone.js:1600)
    at globalZoneAwareCallback (zone.js:1637)

标签： angulardropbox

解决方案

推荐阅读