如何使用 Angular 将变量转换为 HTML 元素答案

【问题标题】：how to convert a variable into HTML element with Angular如何使用 Angular 将变量转换为 HTML 元素
【发布时间】：2019-08-26 19:21:20
【问题描述】：

我有一个 json 文件

{
  "articles": [
    {
      "id": 1,
      "title": "<h1>How to install Atom</h1>"
    },
    {
      "id": 2,
      "title": "<h1>Installing Boostrap</h1>"
    }
  ]
}

我正在使用json-server 和angular 8 来读取这个json。如您所见，title 字段在屏幕上呈现时应该是一个 html 头标签。但它是按原样打印的。看，这就是我想说的。。我想在运行时将其转换为标题 1 标记。我的app.component.html 是

  <div id="data-container">    
  </div>

  Hello
  <table>
    <tr *ngFor="let art of lstcomments">
      <td>{{art.id}}</td>
      <td>
        document.querySelector('#data-container').innerHTML={{art.title}}
      </td>
    </tr>
  </table>
</div>
<router-outlet></router-outlet>

我的title 存储在{{ art.title }} 中。我尝试使用 id data-container 创建一个单独的 div 并使用 document.querySelector 但整个代码被打印为字符串。我现在该怎么办。

【问题讨论】：

标签： javascript angular

【解决方案1】：

正如official docs 中提到的那样，Angular 会自动清理 HTML，因此您不能只将它放在带有变量的模板中。这样做是为了通过允许外部参与者与您的页面交互并在您的 HTML 中推送内容来防止不同类型的攻击。

对于要解释的 HTML，您可以将其绑定到 HTML 属性 innerHTML，如下例所示：

<span [innerHTML]="art.title"></span>

【讨论】：

哦，我阅读了官方文档，但我想我一定忽略了这一点。我赞成并接受。谢谢。这行得通。

【解决方案2】：

这很简单。试试下面的解决方案。更准确、更安全。
在 JSON 描述中，当遇到 SVG 图像路径或第三方锚 URL 到达时更有可能被破坏，因此我们还应该使用 sanitize HTML 作为其解决方案。

app.component.html


    <div>
        <!-- <div id="data-container"></div> -->
        <!--Not Needed-->
        Hello
        <table>
            <tr *ngFor="let art of lstcomments">
                <td>{{art?.id}}</td>
                <td>
                    <div [innerHTML]="art?.title | sanitizedHtml"></div>
                    <!-- document.querySelector('#data-container').innerHTML={{art.title}} -->
                    <!--Not Needed-->
                </td>
            </tr>
        </table>
    </div>
    <router-outlet></router-outlet>

sanitized-html.pipe.ts


    import { Pipe, PipeTransform } from '@angular/core';
    import { DomSanitizer } from '@angular/platform-browser'
    @Pipe({
      name: 'sanitizedHtml'
    })
    export class SanitizedHtmlPipe implements PipeTransform {
      constructor(private sanitized: DomSanitizer) {}
      transform(value: any): any {
        return this.sanitized.bypassSecurityTrustHtml(value);
      }
    }

我希望它会运作良好。另外，如果您想详细了解如何导入此经过消毒的管道，请从this post获取信息

【讨论】：

【解决方案3】：

您必须将属性直接绑定到这样的变量

  <div id="data-container" [innerHTML] ="art.title">

  </div>

在你的控制器中你必须声明变量 art 然后做：

this.art = articles[0] // or articles[1], depending on which article you want

您要么这样做，要么将容器放在 ng-for 中。

【讨论】：

【解决方案4】：

希望你做得很好！！！

您可以从这里得到答案：Angular 2, DomSanitizer, bypassSecurityTrustHtml, SVG。但是，我建议注入DomSanitizer 服务。

我建议从官方文档中阅读此 (https://angular.io/guide/security)。所有 JS 框架的行为都与您的问题完全一样，这是正确的！

我建议您也阅读这篇文章 (https://angular.io/api/platform-browser/DomSanitizer)，这样您就永远不会遇到这方面的问题！

希望我尝试回答您的问题。快乐编码！干杯！！！

【讨论】：

【解决方案5】：

您应该使用服务来调用服务器并通过服务检索值。完成此操作后，将服务注入您的组件并调用服务请求以检索 JSON 响应并使用组件中的本地变量在模板中设置字符串。

【讨论】：

我已经这样做了。我有myapi.service.ts 来处理这个问题。但现在这里无关紧要。请正确阅读问题。