动态HTML

Question

我正在尝试解析并将HTML注入我的应用程序时遇到问题。

1. 我从API获取字符串

2. 解析字符串，并在服务级别用标记替换某些内容。新字符串如下所示：

   [mention]{\"label\": \"Stack\"}[/mention] with some other text
   and a second [mention]{\"label\": \"Overflow\"}[/mention] with text
   

3. 然后字符串由视图中的组件显示

   <div class="custom">{{ parsedString }}</div>
   

我尝试了多种方法，例如将innerHTML与sanitizeHTML管道一起使用，并在向其HTML添加路由器链接时阅读了一些有此问题的帖子，但我似乎无法正确理解如何使用{{1}在我的情况下。

我看到this answer多次链接，但对我而言，它是代码的土豆泥，我无法理解它背后的逻辑......

更新

所以我最终使用viewContainerRef来解析字符串，并使用字符串的每个部分创建一个模板，以便在需要时显示一个组件。

1. 我的视图组件从API获取字符串
2. 视图组件在其模板中插入字符串，并使用管道对其进行解析。
3. 过滤器返回一个字符串数组，可以在Pipe循环
中使用

*ngFor

view.component.ts

<div *ngFor="let string of text | mentions"> <ng-container *ngIf="string.label"> <mention> <!-- We can use a component with dynamic HTML ! --> {{ string.label }} </mention> </ng-container> <ng-container *ngIf="!string.label"> {{ string }} </ng-container> </div>

mentions.pipe.ts

这可能不是最佳解决方案，因为它意味着每次我们知道时使用/* Angular */ import { Injectable, Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'mentions' }) @Injectable() export class MentionsPipe implements PipeTransform { tryParseJSON(string: string) { try { const json = JSON.parse(string); if (json && typeof json === 'object') { return json; } } catch (e) {} return string; }; transform(value: string) { const regex = /\[mention\]([^[]*(?:\[(?!mention\]|\/mention\])[^[]*)*)\[\/mention\]/ig; return value .split(regex) .map((match: string) => { // The mention is a stringified JSON, so we want to parse it return this.tryParseJSON(match); }); } } 循环中的管道动态HTML将包含提及（在我的情况下），但是现在我对此感到满意，直到Angular提供了一种很好的安全方法来检测和替换注入HTML中的组件。

Answer 1

Angular块运行时编译。所以你需要做一些技巧。 https://github.com/patrikx3/angular-compile =＆gt;适用于Angular 4.不是5，所以没有前途。

我使用动态组件解决了这个问题。 我可以推荐https://medium.com/front-end-hacking/dynamically-add-components-to-the-dom-with-angular-71b0cb535286本指南。