Angular 2和Google Custom Search。 Angular2剝離html標記

Question

我正在嘗試將Google自定義搜索添加到我的角度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

這不是一個很好的解決方案，但功能我通過使用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); 
}