Question

我想在角度组件中显示完整的html页面。我尝试过使用Sanitizing，但没有运气。

该服务返回一个完整的html文档，包括文档类型，头部和正文。以下是我到目前为止的情况：

app.component.html

<div [innerHtml]="htmlBody | keepHtml: 'html'"></div>

app.component.ts

this._loginService.getUserInfo()
            .subscribe(
                success => {
                    if (success) {                            
                            this.htmlBody = success._body;
                    }
                });

safe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';


@Pipe({ name: 'keepHtml', pure: false })
export class SafePipe implements PipeTransform {
constructor(private _sanitizer: DomSanitizer) {
}

    public transform(value: string, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
        case 'html':
            return this._sanitizer.bypassSecurityTrustHtml(value);
        case 'style':
            return this._sanitizer.bypassSecurityTrustStyle(value);
        case 'script':
            return this._sanitizer.bypassSecurityTrustScript(value);
        case 'url':
            return this._sanitizer.bypassSecurityTrustUrl(value);
        case 'resourceUrl':
            return this._sanitizer.bypassSecurityTrustResourceUrl(value);
        default:
            throw new Error(`Unable to bypass security for invalid type: ${type}`);
    }
}
}

结果如下：

我期待的地方：

以下是服务退货：

<!DOCTYPE html>


<!-- template name: sourceid-choose-idp-adapter-form-template.html -->


<html lang="en" dir="ltr">
<head>
<title>Select Authentication System</title>
<meta name="robots" content="noindex, nofollow" />
<base href="XXXX"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<link rel="stylesheet" media="all" type="text/css" href="assets/css/main.css" />
</head>

<body>

<div class="ping-container">

<!-- 
if there is a logo present in the 'company-logo' container,
then 'has-logo' class should be added to 'ping-header' container.
-->
<div class="ping-header">
<span class="company-logo"><!-- client company logo here --></span>
Select Authentication System
</div><!-- .ping-header -->

<div class="ping-body-container">
<form method="GET" action="/as/0u6NO/resume/as/authorization.ping">

<div class="firstcut">
<div class="ping-messages">
<div>
Please select an authentication system to verify your identity.
</div>
</div>
<div class="ping-input-container ping-input-label">
<label class="input-select">
<span class="label-text">
Select authentication system:
</span>
<div class="input-container">
<div class="wrapper">
<select name="pfidpadapterid">
<option value="ad..HTMLFormAdapter">HTMLFormAdapter</option>
<option value="ad..Kerberos">Kerberos</option>
<option value="ad..OLBTo9spokesDev">OLBTo9spokesDev</option>
<option value="ad..OLBTo9spokesSdf">OLBTo9spokesSdf</option>
<option value="ad..OLBToIntuitDev">OLBToIntuitDev</option>
<option value="ad..OLBToIntuitSdf">OLBToIntuitSdf</option>
<option value="ad..OLBToWaveDev">OLBToWaveDev</option>
<option value="ad..OLBToWaveDev1">OLBToWaveDev1</option>
<option value="ad..OLBToWaveSdf">OLBToWaveSdf</option>
<option value="ad..OLBToYodleeDev">OLBToYodleeDev</option>
<option value="ad..OLBToYodleeSDF">OLBToYodleeSDF</option>
<option value="ad..RefIDDemoLogin">RefIDDemoLogin</option>
</select>
</div>
</div>
</label>
</div>
<label class="remember-selection">
<div class="ping-checkbox-container stacked">
<input type="checkbox" name="rememberChoice" value="true" checked />
<div class="icon"> </div>
Remember selection
</div>
</label>
</div>
<div class="ping-buttons">
<input type="submit" class="ping-button normal" value="Continue" title="Continue"/>
</div>
<div class="hidden-fields" style="display:none;">
</div>
</form>
</div><!-- .ping-body-container -->

<div class="ping-footer-container">
<div class="ping-footer">
<div class="ping-credits"></div>
<div class="ping-copyright">Copyright © 2003-2018. Ping Identity Corporation. All rights reserved.</div>
</div> <!-- .ping-footer -->
</div> <!-- .ping-footer-container -->

</div><!-- .ping-container -->

</body>
</html>

Answer 1

我能够使用以下代码解决问题：

app.component.html

this._loginService.getUserInfo()
            .subscribe(
                success => {
                    let s = document.getElementById('fred');
                    s.contentDocument.write(success._body);
                });

app.component.ts

re.search(r'[a-zA-Z]+', str)

Answer 2

最简单的解决方案是使用iframe并将src设置为url。您有一个来自服务器的完整文档，您将永远不会按照您的意愿进行渲染，因为它使用了文档中已存在的HEAD和BODY标记。

Answer 3

请参阅以下模拟网址：https://stackblitz.com/edit/angular-xnciq7

使用[innerHtml]属性

将响应数据绑定到DOM

<hello [innerHtml]="data"></hello>
...
data = `<!doc type html>
      <html>
        <body>
          <h1>Welcome</h1>
        </body>
      </html>`;

最好使用Custom madefted，Bootstrap或Material Popup组件。

Angular 2/4 - 在模态窗口中显示HTML文档

3 个答案: