我正在尝试将Google自定义搜索添加到我的角度2应用程序中.
当我将它放入 jsfiddle时,使用自定义搜索中的代码可以正常工作,但是当插入到我的组件中时,我遇到了让它工作的问题.
当我将它放入 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);
}
解决方法
这不是一个很好的解决方案,但我通过传递< gcse：search>来实现它.使用DomSanitizationService的bypassSecurityTrustHtml标记到容器div的InnerHTML,而不是将其存在.
my.component.html现在看起来像：
<div class="google-media-search" [innerHTML]="gcsesearch"></div>
和my.component.ts包含以下内容：
import {DomSanitizationService,SafeHtml} from '@angular/platform-browser';
...
constructor(
private sanitizer: DomSanitizationService,...
){}
gcsesearch: SafeHtml;
ngOnInit() {
this.gcsesearch = this.sanitizer.bypassSecurityTrustHtml("<gcse:search></gcse:search>");
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);
}
