Angular 2和Google Custom Search. Angular2剥离html标记

发布时间：2020-12-17 17:16:52 所属栏目：安全来源：网络整理

导读：我正在尝试将Google自定义搜索添加到我的角度2应用程序中. 当我将它放入 jsfiddle时,使用自定义搜索中的代码可以正常工作,但是当插入到我的组件中时,我遇到了让它工作的问题. 问题似乎是,当插入脚本的代码运行时,html标记 gcse：search被剥夺了它的gcse：成

我正在尝试将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);
}

解决方法

这不是一个很好的解决方案,但我通过传递< 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);
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!