Angular 2 und Google Custom Search. Angular2 stripping html tag

Question

Ich versuche, Google Custom Search in meine angular 2 Anwendung hinzuzufügen. Die Verwendung des Codes aus der benutzerdefinierten Suche funktioniert, wenn ich ihn in eine jsfiddle einfüge, aber ich habe Probleme, wenn er in meine Komponente eingefügt wird.

Das Problem scheint zu sein, dass der Code durch die Zeit das Skript einzufügen läuft, wird der HTML-Tag <gcse:search> davon ausgezogen ist gcse: Teil <search> zu werden, und ich denke, das Skript, das dann ausgeführt wird, kann keine Elemente finden weiterarbeiten.

My.component.html ist im Wesentlichen:

<gcse:search></gcse:search> 

und in My.component.html.ts habe ich eine Funktion, die ngOnInit implementiert

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

Dies ist keine schöne Lösung, aber ich habe es funktioniert, indem Sie das <gcse:search>-Tag an die InnerHTML eines Container-div mit bypassSecurityTrustHtml von DomSanitizationService übergeben, anstatt es bereits vorhanden zu haben.

my.component.html sieht nun wie:

<div class="google-media-search" [innerHTML]="gcsesearch"></div> 

und my.component.ts hat die enthalten folgende:

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