以角度显示转义的HTML [英] Displaying escaped HTML in angular

问题描述

我正在寻找一种简化的方法来在浏览器中显示转义的html代码.IE.这是用于快速启动/lib演示"页面的.

I'm looking for a simplified way to display escaped html code in the browser. I.e. this is for a "quick start / lib demo" page.

所以我想按原样显示此行(没有角度拦截和调用组件):

So I want to display this line as it is (without angular intercepting and calling the component):

<wd-input [label]="'this is a label'"></wd-input>

我尝试过类似的事情:

{{ '<wd-input [label]="'this is a label'"></wd-input>' }}

但是它没有用，Angular仍然编译并渲染了它.

But it didn't work, Angular still compiled and rendered it.

要提供更多上下文，除非我们找到更好的方法(即直接在模板中手动转义html)，否则这就是我要做的事情:

to provide more context, this is what I'm going to have to do unless we find a better way (i.e. manually escaping the html directly in the template):

<wd-input [label]="'this is a label'"></wd-input;

推荐答案

检查 工作堆BLITZ

---

我在这里做的2种方法

1.为了避开双花括号 {{}} ，我使用了 DomSanitizer 到 bypassSecurityTrustHtml 来显示原始代码和替换后的< & lt; 和> 的& gt

2 approaches i'm doing in here

1. To escape double curly braces {{}} I've used DomSanitizertobypassSecurityTrustHtml to show raw code and Replaced < with < and > with >

2.我使用了 textarea只读和一些 CSS 样式来显示原始html内容.

2. I used textarea readonly and some CSS styling to show raw html content.

您的 component.ts 可能类似于以下内容:〜

Your component.ts can be something like below:~

import { Component, NgModule, Pipe, PipeTransform } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms';

import { DomSanitizer, SafeHtml } from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  templatehtml: string;
  html: SafeHtml;
  constructor(private sanitized: DomSanitizer) {

    this.templatehtml = `
      import { Component, NgModule, Pipe, PipeTransform } from '@angular/core'
      import { BrowserModule } from '@angular/platform-browser'
      import { FormsModule } from '@angular/forms';

      @Component({
      selector: 'my-app',
      template: '<span>{{name}}</span>'
      })

      export class AppComponent {
        name = "Angular";
      }  
    `;


    this.html = this.sanitized.bypassSecurityTrustHtml(this.templatehtml);
  }
}

您的 component.html 可能如下所示:〜

Your component.html can be something like below:~

<div class="container">
  <b>Your raw component looks something like</b> 
  <pre [innerHtml]="html"></pre>

  <b>Your raw html looks something like</b> 
  <textarea readonly>
    <div class="card" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <wd-input [label]="'this is a label'"></wd-input>
        <p class="card-text">Some quick example</p>
        <a href="#" class="btn btn-primary">
          Go somewhere
        </a>
      </div>
    </div>
  </textarea>

  <b>This is the rendered html</b> 
  <div class="card" style="width: 18rem;">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example</p>
      <a href="#" class="btn btn-primary">
        Go somewhere
      </a>
    </div>
  </div>
</div>

和文本区域 CSS ，例如

and text area CSS like

textarea {
  border: none;
  outline: none;
  width: 100%;
  height: 50vh;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  resize: none; /*remove the resize handle on the bottom right*/
}

希望这会有所帮助！

这篇关于以角度显示转义的HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！