Question

我正在尝试将Google自定义搜索添加到我的angular 2应用程序中。当我将自定义搜索中的代码放入jsfiddle时，使用自定义搜索中的代码，但是在插入到我的组件中时，我遇到了问题。

问题似乎是，当插入脚本的代码运行时，html标记<gcse:search>被剥夺gcse:部分成为<search>我想那个运行的脚本无法找到任何要处理的元素。

My.component.html基本上是：

<gcse:search></gcse:search>

在My.component.html.ts中我有一个实现ngOnInit

的函数

ngOnInit(){
    var cx = '016820916711928902111:qw0kgpuhihm';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
}

Answer 1

这不是一个很好的解决方案但我通过使用<gcse:search>的{{1}}将bypassSecurityTrustHtml标记传递给容器div的InnerHTML而不是已经使用它现有

my.component.html现在看起来像：

DomSanitizationService

和my.component.ts包含以下内容：

<div class="google-media-search" [innerHTML]="gcsesearch"></div>

Angular 2和Google Custom Search。 Angular2剥离html标记

1 个答案: