Угловой 2 и Google Custom Search. Angular2 stripping html tag

Question

Я пытаюсь добавить Google Custom Search в свое угловое приложение 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> ВнутреннемуHTML контейнера div, используя 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); 
}