如何在 Angular 2 中通过 ng-for 将 HTML 字符串转换为真正的 HTML 元素？答案

【问题标题】：How to translate HTML string to real HTML element by ng-for in Angular 2?如何在 Angular 2 中通过 ng-for 将 HTML 字符串转换为真正的 HTML 元素？
【发布时间】：2016-02-02 00:32:03
【问题描述】：

据我所知，在 Angular 1.x 中，我可以像这样使用 $sce 服务来满足我的要求

myApp.filter('trustAsHTML', ['$sce', function($sce){
  return function(text) {
    return $sce.trustAsHtml(text);
  };
}]);

在html文件中这样使用

{{ htmlString || trustAsHTML }}

在 angularjs 2 版本中是否有像 $sce 或一些管道或任何方法可以胜任的服务？

【问题讨论】：

标签： html angular

【解决方案1】：

在 angular2 中没有ng-include、trustAsHtml、ng-bind-html 也没有类似的，所以你最好的选择是绑定到innerHtml。显然，这让您可以接受各种攻击，因此您可以自行解析/转义内容，为此您可以使用管道。

@Pipe({name: 'escapeHtml', pure: false})
class EscapeHtmlPipe implements PipeTransform {
   transform(value: any, args: any[] = []) {
       // Escape 'value' and return it
   }
}

@Component({
    selector: 'hello',
    template: `<div [innerHTML]="myHtmlString | escapeHtml"></div>`,
    pipes : [EscapeHtmlPipe]
})
export class Hello {
  constructor() {
    this.myHtmlString = "<b>This is some bold text</b>";
  }
}

这是一个 plnkr，带有一个简单的 html 转义/解析。

希望对你有帮助:)

【讨论】：

看起来语法现在是[innerHTML]: stackoverflow.com/a/34424375/86937
这对于您的 innerHTML 实际上包含 angular-usable 代码的情况是不够的。就我而言，我希望能够使用 [routerLink]，但我不能。
@thouliha 你有没有找到解决方案？
@Tucker 不。一旦你使用了 [innerHTML]，你就失去了所有的模板能力。 Angular 似乎真的希望你直接在静态 html 中完成所有模板。
plnkr中的解决方案只针对标签，对于任何（全部）html标签如何处理？

【解决方案2】：

最简单的解决方案：

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

其中some_string可以是html代码，例如：some_string = "<b>test</b>"。

不需要管道或任何东西。由 Angular 2.0 支持

【讨论】：

如何在innerHTML 中拥有两个以空格分隔的属性。喜欢prop1_value prop2_value。无需创建任何方法来连接它们。
尝试做类似 [innerHTML]="{prop1_value + ' ' + prop2_value}"
它不是这样工作的。我添加了一个新的span 并在那里添加了该道具值。

【解决方案3】：

我遇到了同样的问题，请购买我从后端请求解码 HTML，然后您可以将 html 注入您的页面

// YOUR TS
@Component({
  selector: 'page',
  templateUrl: 'page.html'
})
export class Page {
  inject:any;
  constructor( ) { }

  ionViewDidLoad() {
    this.inject='your HTML code'

  }

}

// YOU HTML PAGE

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

【讨论】：

【解决方案4】：

下面的属性绑定使用： <div innerHtml="{{ property }}"></div>

只是一个字符串： <div [innerHtml]="<p>property</p>"></div>

【讨论】：

【解决方案5】：

对您有帮助的最佳解决方案如下：

<p [innerHTML]=your_response_which_is_string></p>

希望对你有帮助！！！

【讨论】：