当HTML来自数据库时,如何在角度6中渲染要点代码(GItHub)

时间:2018-11-15 17:03:32

标签: javascript angular github

我将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>

以下是为管道定义的代码-

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将GIST嵌入HTML。

解决方案-我通过使用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)

感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

我有完全相同的错误

  

发生意外错误:错误:未捕获(承诺):TypeError:   t不是构造函数TypeError:t不是构造函数

切换为使用ngx-gist

它在生产中运行良好。

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