在我当前的项目中,我们希望从包含document.write的外部javascript文件中获取表。过去,我们是通过以下方式完成此操作的:

<script src="http://url.to.external.domain.com/file.ashx?sid=<ID>" type="text/javascript"></script>


这将返回一个JavaScript文件,该文件包含一个document.write()以及需要在脚本标签位置显示的HTML。

现在,我们正在Angular2中尝试这样做。在Angular1中,我已通过使用将脚本标记写入模板的指令来解决此问题。这很好。

Angular2从模板中删除脚本标签,因此这不是解决方案。我试图创建一个单独的组件来“模仿”我在Angular1中使用的解决方案,如下所示:

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

@Component({
    moduleId: module.id,
    selector: 'external-table',
    template: `<script src="http://url.to.external.domain.com/file.ashx?sid={{id}}" type="text/javascript"></script>`
})

export class ExternalTableComponent {
    @Input('id') id: number;
}


这会在浏览器控制台中引发警告:


  无法在“文档”上执行“写入”:无法写入
  从异步加载的外部脚本进入文档,除非
  它被显式打开。


由于我无权访问此第三方服务器,因此无法更改此表的生成或检索方式。

有谁知道我应该如何在Angular2中做到这一点?

最佳答案

这是在“ npm install --save postscribe”之后用PostScribe加载Angular 7中的DarkSky API的示例。

import postscribe from 'postscribe';

const script = '<script src="https://darksky.net/map-embed/@radar,41.88,-87.62,10.js?embed=true&timeControl=false&fieldControl=false&defaultField=radar"></script>';

postscribe('#darkSky', script);


模板中存在ID为“ darkSky”的DIV

10-06 12:33