我正在尝试设置一个标签系统,允许组件自己注册(带标题).第一个选项卡就像一个收件箱,有大量的操作/链接项可供用户选择,每个点击都应该能够在点击时实例化一个新组件.动作/链接来自JSON.
然后,实例化的组件将自己注册为新选项卡.
我不确定这是否是"最佳"方法？Sofar我见过的唯一指南是静态标签,这没有帮助.
到目前为止,我只有主要引导的标签服务在整个应用程序中持续存在,看起来像这样的东西.
export interface ITab { title: string; }
@Injectable()
export class TabsService {
private tabs = new Set<ITab>();
addTab(title: string): ITab {
let tab: ITab = { title };
this.tabs.add(tab);
return tab;
}
removeTab(tab: ITab) {
this.tabs.delete(tab);
}
}
问题:
DynamicComponentBuilder会被使用吗？ng-content,但我找不到有关如何使用它的更多信息编辑:尝试澄清
将收件箱视为邮件收件箱,将项目作为JSON提取并显示多个项目.单击其中一个项目后,将创建一个新选项卡,其中包含该项操作"类型".然后类型是一个组件
Edit2:图片
我尝试使用innerHTMLa 将一些脚本加载到页面中<div>.看起来脚本加载到DOM中,但它永远不会被执行(至少在Firefox和Chrome中).有没有办法让脚本在插入时执行innerHTML？
示例代码:
<!DOCTYPE html>
<html>
<body onload="document.getElementById('loader').innerHTML = '<script>alert(\'hi\')<\/script>'">
Shouldn't an alert saying 'hi' appear?
<div id="loader"></div>
</body>
</html>我有一个脚本,使用一些内容将一些内容插入元素innerHTML.
例如,内容可以是:
<script type="text/javascript">alert('test');</script>
<strong>test</strong>
问题是<script>标签内的代码没有被执行.我用Google搜索了一下,但没有明显的解决方案.如果我使用jQuery插入内容$(element).append(content);,脚本部分eval会在注入DOM之前得到.
有没有人有一段执行所有<script>元素的代码？jQuery代码有点复杂,所以我无法弄清楚它是如何完成的.
编辑:
通过窥视jQuery代码,我已经设法弄清楚jQuery是如何做到的,这导致了以下代码:
Demo:
<div id="element"></div>
<script type="text/javascript">
function insertAndExecute(id, text)
{
domelement = document.getElementById(id);
domelement.innerHTML = text;
var scripts = [];
ret = domelement.childNodes;
for ( var i = 0; ret[i]; i++ ) {
if ( scripts && nodeName( ret[i], "script" ) && (!ret[i].type || ret[i].type.toLowerCase() === "text/javascript") ) {
scripts.push( ret[i].parentNode ? ret[i].parentNode.removeChild( ret[i] ) : ret[i] );
}
}
for(script …我从服务器内容到json对象字段,它是html <style></style>和<script></script>标签,我想这样执行它:
[innerHtml] ="content | sanitize",但<script></script>标签不执行.它可以使它工作吗？
我的消毒管看起来像这样:
import {Pipe} from '@angular/core';
import {DomSanitizationService} from '@angular/platform-browser';
@Pipe({
name: 'sanitize',
pure: true
})
export class Sanitize {
constructor(private sanitizer: DomSanitizationService) {
}
transform(html: string) {
return this.sanitizer.bypassSecurityTrustHtml(html);
}
}
我知道,DomSanitizationService中有bypassSecurityTrustScript函数,但我怎么能在我的情况下使用它呢？