角2とGoogleカスタム検索。 Angular2ストリップhtmlタグ

Question

私はAngular2アプリケーションにGoogleカスタム検索を追加しようとしています。 カスタム検索のコードを使用すると、jsfiddleに配置されますが、コンポーネントに挿入すると問題が発生します。

問題が<search>になるためにgcse:一部だと私は、その後に実行されるスクリプトがに任意の要素を見つけることができないと思い、時間によって、スクリプトを挿入するためのコードが実行されると、htmlタグ<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

を実装する関数を持っているI <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); 
}