在 Angular 6 项目中添加具有自定义属性的自定义脚本

Question

我需要在我的角度项目的组件中添加脚本（cdn）。

在其中

        // Start: for drop box
        var dbx = new Dropbox({ accessToken: 'A4fRBcFXasdkpAAAAAdgfdfgdfgAAAAAZBlQ9MJNe81yrTLOCioH-7Ty083asdEQSqTD97s7mLIJH0V', fetch: fetch });
        dbx.filesListFolder({ path: '' })
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });
        // End: for dropbox```

addJsToElementDropbox(src: string, type: string, id: string, key: string): HTMLScriptElement {

    let script:any = document.createElement('script');
    script.type = type;
    script.src = src;
    script.id = id;      
    this.renderer.appendChild(document.body, script);
    return script;

}```

这是在 DOM 中创建的脚本

<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs"></script>

我的需要是在 DOM 中创建一个这样的脚本

<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="my-key"></script>

Answer 1

使用设置属性设置自定义属性

addJsToElement1(src: string, type: string): HTMLScriptElement {
    const script = document.createElement('script');
    script.setAttribute('data-app-key', 'Test');
    script.type = type;
    script.src = src;
    this.renderer.appendChild(document.body, script);
return script;
}