Question

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

所以我想按原样显示此行（没有角度拦截和调用组件）：

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

我尝试过类似的事情：

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

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

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

&lt;wd-input [label]="'this is a label'"&gt;&lt;/wd-input;

Answer 1

您可以尝试将html字符串存储在变量中，然后将其显示在页面上。

@Component({
selector: 'my-app',
template: `    
<div> {{htmlString }}</div>
`
})

export class AppComponent  {

htmlString = `<wd-input [label]="'this is a label'"></wd-input>`;
  constructor() {}  
}

更新我创建了一个包装器组件，该组件使用第一个元素并将其存储为字符串，然后使用ng-content呈现它。看一看。您可以使用此https://stackblitz.com/edit/quick-html-wrapper

Answer 2

如果要将HTML保留在模板中，则不能绕过转义引号。也许是最接近的解决方案：

<span [innerText]="'<wd-input [label]=&quot;\'this is a label\'&quot;></wd-input>'"></span>

Answer 3

检查 WORKING STACKBLITZ

我在这里做的2种方法

1。为了避免使用大括号{{}}，我使用了DomSanitizer至bypassSecurityTrustHtml来显示原始代码，并将<替换为<，而>替换为{ {1}}

2。我使用了>和一些textarea readonly样式来显示原始的html内容。

您的CSS可能如下所示：〜

component.ts

您的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

和文本区域<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

希望这会有所帮助！

以角度显示转义的HTML

3 个答案:

检查 WORKING STACKBLITZ

我在这里做的2种方法