Angular 7+：在运行时从REST API获取的动态用户内容（HTML）中的渲染指令

Question

I have an app which fetches user-content like blog content, which is saved as HTML on the server.

I need to render it and it might have custom directives like

REST API RESPONSE SAMPLE:
content: "<div>
<span class="impressive-css-class">This is rendered perfectly by passing HTML to sanitizer.bypassSecurityTrustHtml</span>
and 
<span spoiler>SpiderMan dies on Page 142: Rendered as HTML. Directive not processed (naturally)</span>
</div>"

I need to render the spoiler directive on this dynamically returned user-content.

I have come to know from SO and extensive searching that one way to do it is by enabling JIT (no AOT) during the build process (buildOptimizer: false, and import 'core-js/es7/reflect' in polyfills.ts, create module/component dynamically using JIT) in a long complicated way (which might break on angular version upgrades)

Is there any other way to render my use-case dynamically that I'm unaware of ?

Answer 1

Possible ways to implement this

• Enabling JIT compiler and creating dynamic modules
• Angular Elements
• Modifying the rendered HTML using native JS or some other library

Answer 2

You can use:

<div [innerHTML]="content"></div>

Which will render your content variable inside that element

However, thats not the purpose of a REST api.