Question

我目前正在尝试开发一个Web应用程序以向用户显示电子邮件。对我来说很重要的是，电子邮件的显示方式就像在电子邮件客户端（例如gmail）中一样。我使用gmail api将电子邮件导入到我的数据库中，然后从电子邮件中获取messageparts到我的angular应用程序中。问题是我无法以适当的样式显示html电子邮件。似乎html标签已习惯使用，但原始样式似乎丢失了

我正在使用角度7和弹簧靴。为了收集电子邮件，我使用gmail api并将其导入到postgresql数据库中。我尝试使用iframe，因此我的应用程序样式不会像电子邮件样式那样受到阻碍，但会以相同的方式显示。

我如何准备电子邮件

private String getMessageContent(Message message) {
        StringBuilder stringBuilder = new StringBuilder();
        try {
            if(message.getPayload().getParts() != null) {
                handleEmailMainContent(message.getPayload().getParts(), stringBuilder);
                byte[] bodyBytes = Base64.decodeBase64(stringBuilder.toString());
                return new String(bodyBytes, "UTF-8");
            } else {
                return "";
            }
        } catch (UnsupportedEncodingException e) {
           System.out.println("UnsupportedEncoding: " + e.toString());
            return message.getSnippet();
        }
    }

    private void handleEmailMainContent(List<MessagePart> messageParts, StringBuilder stringBuilder) {
        for (MessagePart messagePart : messageParts) {
            switch (messagePart.getMimeType()) {
                case "text/plain":
                    handleMimeTypeTextPlain(messagePart, stringBuilder);
                    break;
                case "text/html":
                    handleMimeTypeTextHtml(messagePart, stringBuilder);
                    break;
                default:
                    break;
            }
        }
    }

注意：selectedEmail.mainContent是我在上面构建的字符串

示例

mainContent内部的内容是我尝试收集和显示的网络钓鱼电子邮件。该示例是我尝试显示的HTML电子邮件。我忽略了链接和大部分垃圾内容。

----------转发的邮件--------- 冯：电子邮件地址日期：10日，星期五2019年5月22日上午主题：名字，给妈妈她想要的礼物收件人：emailaddress

图片在 Facebook 上成为Heally家族的一员链接！ -让我们聊庆祝妈妈 ... 妈妈掌管世界。他们从字面上给了我们生命，承担着最艰辛的角色，并在工作日或工作时间无休止的情况下完成所有工作。而妈妈值得全年庆祝，母亲节是确保他们知道自己被爱和赞赏。学到更多链接

仅在寻找CBD产品吗？促销代码： SAVECBD20 链接中央商务区20％折扣链接给妈妈她真正想要的礼物。购物市场

-省略了垃圾邮件-

自己的例子

我尝试向我发送包含以下内容的简约html电子邮件：

*dummy*
<div dir="ltr"><i>dummy</i></div>

，效果很好。也许问题是外部类无法通过gmail api显示/加载和/或导出

我如何显示它

<mat-card>
  <mat-card-title>
    Current Email
  </mat-card-title>
  <mat-card-content [innerHTML]="selectedEmail.mainContent">
  </mat-card-content>
</mat-card>

我想像显示在gmail中一样显示电子邮件，相反，我只能通过html标签显示纯文本和基本样式。我不知道样式会在哪一步丢失，或者是否无法正确显示电子邮件。

Answer 1

角度安全性阻止HTML和其他脚本的动态呈现。您需要使用DOM Sanitizer绕过它们。

在此处了解更多信息：Angular Security

请在下面更改您的代码：

    // in your component.ts file

    //import this 
    import { DomSanitizer } from '@angular/platform-browser';

    export class TestComponent{

    public htmlData :any ; 
    // in constructor create object 

    constructor( 
    ...
    private sanitizer: DomSanitizer

    ...
    ){

    }

    someMethod(){

      /* this method must be called after getting the value of selectedEmail.mainContent 
   from service  */


     this.htmlData = this.sanitizer.bypassSecurityTrustHtml(selectedEmail.mainContent); // this line bypasses angular security
    }
}

在compoenent.html

中

<div [innerHtml]="htmlData"> </div>

这是工作中的StackBlitz：Working Demo

如何像在电子邮件客户端中一样显示在有角度的应用程序中显示电子邮件

示例

自己的例子

我如何显示它

1 个答案: