Angular 2 和 Google 自定义搜索。 Angular2剥离html标签
Angular 2 and Google Custom Search. Angular2 stripping html tag
我正在尝试将 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);
}
这不是一个很好的解决方案,但我通过使用 DomSanitizationService
的 bypassSecurityTrustHtml
将 <gcse:search>
标记传递给容器 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);
}
我正在尝试将 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);
}
这不是一个很好的解决方案,但我通过使用 DomSanitizationService
的 bypassSecurityTrustHtml
将 <gcse:search>
标记传递给容器 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);
}