如何在Angular模板中嵌入GitHub要点? [英] How to embed a GitHub gist in the Angular template?
本文介绍了如何在Angular模板中嵌入GitHub要点?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Angular会忽略其模板中的script标记，但需要它们来加载GitHub gist.最佳做法是什么?使用iframe吗?动态创建script标签?还是其他?
Angular ignores script tags in its template, but they are required to load GitHub gist. What is the best practice to do this? Using iframe? Creating script tag dynamically? Or something else?
推荐答案
一种方法是创建一个内部带有script的iframe，并在您希望显示要旨时将其追加(基于
One method is to create an iframe with script inside and append it whenever you want your gist to appear (based on jasonhodges solution).
<iframe #iframe type="text/javascript"></iframe>
组件
@ViewChild('iframe') iframe: ElementRef;
gistUrl: string;
ngAfterViewInit() {
const doc = this.iframe.nativeElement.contentDocument || this.iframe.nativeElement.contentElement.contentWindow;
const content = `
<html>
<head>
<base target="_parent">
</head>
<body>
<script type="text/javascript" src="${this.gistUrl}"></script>
</body>
</html>
`;
doc.open();
doc.write(content);
doc.close();
}
这篇关于如何在Angular模板中嵌入GitHub要点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
