如何从Angular中的响应中解析HTML?
Posted
技术标签:
【中文标题】如何从Angular中的响应中解析HTML?【英文标题】:How to parse HTML from response in Angular? 【发布时间】:2020-01-19 19:25:04 【问题描述】:我向服务器发出请求并获得 JSON 结果:
"result" => "html code"
如何解析 HTML 代码并从此响应中获取表格?
我尝试将此代码放置在页面上的隐藏块中:
<div #content>HTML code here from response</div>
接下来呢?如何解析?
【问题讨论】:
使用innerHtml
属性
How to render string with html tags in Angular 4+?的可能重复
Angular HTML binding的可能重复
您发布的 div 需要文本而不是 HTML
【参考方案1】:
app.component.ts
import Component from '@angular/core';
@Component(
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
)
export class AppComponent
name = 'Angular 5';
demo: string = `<div>
<p>I am Yogesh</p>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</div>`
app.component.html
<div [innerHTML]="demo"></div>
【讨论】:
我建议谨慎使用innerHTML
,因为它会造成内存泄漏
@JosephBriggs 你能说什么是替代品,所以它更有用吗?谢谢。【参考方案2】:
import Pipe, PipeTransform from "@angular/core";
import DomSanitizer from "@angular/platform-browser";
@Pipe(name: 'sanitizeHtml')
export class SafeHtmlPipe implements PipeTransform
constructor(private sanitized: DomSanitizer)
transform(value: string)
return this.sanitized.bypassSecurityTrustHtml(value);
Usage:
<div [innerHTML]="content | sanitizeHtml"></div> //Content is what you got from json
我们应该始终清理内容以防止使用 DOMSanitizer 进行任何恶意活动。因此,我们可以像上面一样创建一个管道并在应用程序的任何地方使用它。
【讨论】:
以上是关于如何从Angular中的响应中解析HTML?的主要内容,如果未能解决你的问题,请参考以下文章
Angular项目从项目输出文件夹中的.ts编译附加的.js文件
如何将变量放入语句 [Angular,TypeScript]
Angular 2:我如何将指令应用于净化的 html/innerhtml
如何在 angular.js 中解析 ng-repeat 中的 HTML [重复]