2017-06-17 46 views
2

我在角材料2卡内放置亚马逊横幅。但问题在于它不是渲染。它显示为空div。可能是原因。下面是显示我如何做的代码。放置Amazon Banner | Angular V4

<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); 
} 
+0

控制台中是否显示任何错误? – Raven

+0

@Raven没有错误。当我把它放在我的索引html文件的根组件之外时,它可以工作 – talentedandrew

+0

这很有可能是你的脚本标签在被添加到DOM之后没有被拾取。是否可以选择将脚本标签放在md卡之外并保留div? – Raven

回答

0

在SO有关或类似这个问题,我没有找到任何解决方案this.I报废每一个岗位后,接着在这些职位几乎一切,但没有被工作me.After我对面postscribe库来到这外部加载任何第三方脚本。

首先,我安装了图书馆和进口它在我的组件

import * as postscribe from 'postscribe'; 

之后,我所做的就是打电话给我ngAfterViewInit函数内部功能,通过靶向的divid这在我的情况是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>`);} 

通过这样做我的旗帜被加载。