放置亚马逊横幅 |角 V4答案

【问题标题】：Placing Amazon Banner | Angular V4放置亚马逊横幅 |角 V4
【发布时间】：2017-11-20 06:23:06
【问题描述】：

我在 Angular Material 2 卡片中放置了一个亚马逊横幅。但问题是它没有渲染。它显示空 div。可能是什么原因。下面是显示我是如何做到的代码。

<md-card class="full-width full-height border-box ">
    <div class="adv">
        <script type="text/javascript" language="javascript">
            var aax_size = '728x90';
            var aax_pubname = 'XXXXXXXXXXX';
            var aax_src = '302';
          </script>
          <script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>
    </div>
  </md-card>

我也尝试使用属性绑定来绑定它

<span [innerHTML]="advertisement()"></span>
advertisement(){
  return `<div class="adv">
        <script type="text/javascript" language="javascript">
            var aax_size = '728x90';
            var aax_pubname = 'XXXXXXXXXXX';
            var aax_src = '302';
          </script>
          <script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>
    </div>`;

}

我还尝试在我的卡片中动态添加 div，它显示在 div 中，但横幅没有出现。下面是显示我如何做到这一点的代码。

ngAfterViewInit() {
    let x: HTMLElement = document.getElementById('adv');
    let s: HTMLScriptElement = document.createElement('script');
    s.type = 'text/javascript';
   // s.language = 'javascript';
    let code = `var aax_size = '728x90';
                var aax_pubname = 'XXXXXXX';
                var aax_src = '302';`;
    let src = document.createElement('script');
    src.type = 'text/javascript';
   // src.language = 'javascript';
    src.src = 'http://c.amazon-adsystem.com/aax2/assoc.js';             
    try {
        s.appendChild(document.createTextNode(code));
        x.appendChild(s);
        x.appendChild(src);
    } catch (e) {
        s.text = code;
        document.body.appendChild(s);
    }
    console.log(x);
}

【问题讨论】：

控制台中是否显示任何错误？
@Raven 没有错误。当我将它放在我的索引 html 文件中的根组件之外时，它可以工作
很可能你的脚本标签在添加到 DOM 后没有被拾取。您可以选择将脚本标签放在 md-card 之外并保留 div 吗？
@Raven 试过但仍然显示空 div

标签： javascript angular amazon angular-material2

【解决方案1】：

在删除 SO 中有关或类似于此问题的所有帖子后，我没有找到任何解决方案。我遵循了这些帖子中的几乎所有内容，但没有任何东西对我有用。之后我遇到了 postscribe 库，它可以外部加载任何第三方脚本。

首先我安装了库并将其导入到我的组件中

import * as postscribe from 'postscribe';

在那之后，我所做的只是在我的ngAfterViewInit 函数中调用一个函数，将div 与它的id（在我的例子中是adv）作为目标，并将script 作为第二个参数传递给它功能。

ngAfterViewInit() {
postscribe('#adv', `<script type="text/javascript" language="javascript">
                       var aax_size='728x90';
                       var aax_pubname = 'XXXXXXXX';
                       var aax_src='302';
                    </script>
                    <script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>`);}

通过这样做，我的横幅被加载了。

【讨论】：