如何在Angular项目中正确集成Dropbox Chooser选择器

问题原因 #

失效问题核心原因有两个：

• Angular 会自动过滤组件模板（app.component.html）里的<script>标签，写在组件模板里的JS代码不会执行
• 直接拷贝的原生JS执行时机早于Angular组件DOM渲染，执行document.getElementById的时候对应的容器元素还没生成，自然无法挂载按钮

具体操作步骤 #

第一步：全局引入Dropbox官方脚本 #

只保留index.html里的Dropbox脚本引入，不要把这段代码放到组件模板里：

<!-- 写到index.html的<head>或者<body>末尾都可以 -->
<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="替换为你自己的appkey"></script>

如果你用到了自定义的dropbox-picker.min.js，也统一放到index.html里引入即可。

第二步：声明全局Dropbox对象避免TS报错 #

打开项目根目录的src/types.d.ts（没有就新建一个），添加以下声明：

declare var Dropbox: any;

第三步：编写组件模板和逻辑 #

1. 先写app.component.html的内容，只保留DOM结构，不要放script标签：

<div>
  <div class="row">
    <div class="small-12 columns">
      <div id="dropbox-container"></div>
      <hr>
      <ul id="img_list"></ul>
    </div>
  </div>
</div>

2. 再修改app.component.ts，在ngAfterViewInit生命周期里执行初始化逻辑，保证DOM已经渲染完成：

import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    // 配置项和你之前的保持一致
    const options = {
      success: (files: any[]) => {
        files.forEach(file => {
          this.addImgToList(file);
        });
      },
      cancel: () => {},
      linkType: "preview",
      multiselect: true,
      extensions: ['.png', '.jpg'],
    };
    // 创建按钮并挂载
    const button = Dropbox.createChooseButton(options);
    document.getElementById("dropbox-container")?.appendChild(button);
  }

  // 单独抽离添加图片的方法
  private addImgToList(file: any): void {
    const li = document.createElement('li');
    const a = document.createElement('a');
    a.href = file.link;
    const img = new Image();
    let src = file.thumbnailLink;
    src = src.replace("bounding_box=75", "bounding_box=256");
    src = src.replace("mode=fit", "mode=crop");
    img.src = src;
    img.className = "th";
    document.getElementById("img_list")?.appendChild(li).appendChild(a).appendChild(img);
  }
}

额外注意 #

测试的时候要保证你的Dropbox应用配置里添加了当前测试域名的白名单，否则会触发权限错误。

内容的提问来源于stack exchange，提问作者elaaa