当 HTML 来自数据库时，如何以角度 6 呈现要点代码（GItHub）答案

【问题标题】：How to render gist code(GItHub) in angular 6 when HTML is coming from Database当 HTML 来自数据库时，如何以角度 6 呈现要点代码（GItHub）
【发布时间】：2019-04-18 20:31:56
【问题描述】：

我将 HTML 页面存储在 MongoDb 中，并在运行时根据 blogId 将其呈现为 innerHTML。我正在使用 gridfs 在 Mongodb 中存储 HTML 代码。我的示例文件看起来像

<p>Hello world, i am coming from database </p>        
<gh-gist src="https://gist.github.com/user/0f7c1a14489ecf9e98b70ea4e276fb.js"></gh-gist>
<p> Page code continue after</p>

现在的问题是页面已正确呈现，但 GIST 的代码没有得到呈现和显示。

但是如果没有存储在数据库中，相同的代码代码可以正常工作并按预期显示 GIST 代码以及 HTML。

没有错误显示，只是代码没有出现。

我尝试了以下提供的建议 - Angular 2: sanitizing HTML stripped some content on css style 但没有帮助。

我的页面 HTML 代码是这样的 -

<div [innerHTML]="pageContent | noSanitize"></div>

这是按照建议定义的 Pipe 的代码 -

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({ name: 'noSanitize' })
export class NoSanitizePipe implements PipeTransform {
   constructor(private domSanitizer: DomSanitizer) {

   }
   transform(html: string): SafeHtml {
      return this.domSanitizer.bypassSecurityTrustHtml(html);
   }
}

我正在使用https://www.npmjs.com/package/@sgbj/angular-gist 在 HTML 中嵌入 GIST。

解决方案 - 我通过使用 ng-dynamic 解决了这个问题。

最新问题 - 但是现在我在使用 webpack 进行生产构建时遇到了问题。由于 ng-dynamic 使用 JITCompiler 而 webpack 使用 --aot 编译器。所以 ng-dynamic 不适用于 --aot build。

我现在遇到的错误 -

An unexpected error occured :Error: Uncaught (in promise): TypeError: t is not a constructor
TypeError: t is not a constructor
    at http://localhost:4200/main.c07d94d02c96a651ccd3.js:1:165321
    at No (http://localhost:4200/main.c07d94d02c96a651ccd3.js:1:165568)

感谢任何帮助。

【问题讨论】：

您是否可以分别获取 gist url 和其余内容？
是的，我可以保持独立，但最终我需要将它们嵌入到 Html 页面的某些特定位置。我也有很多这样的 gist url 来表示页数。
此内容是否已修复？固定，我的意思是每个内容项都包含一个p，然后是要点，然后是p？
不是真的，没有这样的模式。它完全随机。
Angular 组件不是这样渲染的（所以在 innerHtml 中。参见stackoverflow.com/questions/40473910/…

标签： javascript angular github

【解决方案1】：

我遇到了完全相同的错误

发生意外错误 :Error: Uncaught (in promise): TypeError: t is not a constructor TypeError: t is not a constructor

改用 ngx-gist

它在产品中运行良好。

https://github.com/jasonhodges/ngx-gist

【讨论】：