Angular 2 和 Google 自定义搜索。Angular2 剥离 html 标签

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>标签传递给容器 div 的 InnerHTML 来bypassSecurityTrustHtml实现它DomSanitizationService，而不是让它已经存在。

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