问题描述
我正在寻找一种简化的方法来在浏览器中显示转义的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;
推荐答案
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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!