停止从风格影响母公司

我已经创建了一个在几个电子邮件客户端我测试过正确显示HTML电子邮件，但是当我提供的是一个预览我的网页上，在innerHTML影响嵌入式风格父母。必须可以避免这种情况，因为当我在gmail中查看电子邮件时，它将正确显示而不会改变gmail本身的样式。停止从风格影响母公司

这里的一些HTML显示问题（但显示在Gmail中无副作用）：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <style type="text/css"> 
      * { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; } 
     </style> 
    </head> 
    <body> 
     <pre style="white-space:pre-wrap;">Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test </pre> 
    </body>  
</html>

我使用的是4角，所以我包括在我的页面是这样的：

<div [innerHTML]="myHtml | safeHtml"> 
</div>

...和safeHtml仅仅是为绕过HTML的角度检查我注射管：

import { Pipe, PipeTransform } from '@angular/core'; 
import { DomSanitizer, SafeHtml } from "@angular/platform-browser"; 

@Pipe({name: 'safeHtml'}) 
export class SafeHtmlPipe implements PipeTransform { 
    constructor(private sanitizer:DomSanitizer){} 

    transform(html) { 

    return this.sanitizer.bypassSecurityTrustHtml(html); 

    } 
}

它作品，因为它确实在div中显示html，但样式信息会改变页面上的所有内容。我明白了 - 我硬是在我的嵌入式样式使用*。 ......但正如我所说的，gmail设法以某种方式'包含'，所以它不会重新设置父元素。我该如何做到这一点？

理想情况下，我希望总体样式隔离 - 就像我不希望父级样式受到父级影响的子级或子级样式（这似乎是gmail的行为方式）。

更新

更改HTML到下面有它的电子邮件的工作，并且包含了CSS，但没有奏效嵌入角：

<!DOCTYPE HTML> 
<html class="my-class"> 
    <head> 
     <style type="text/css"> 
      .my-class * { 
       font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; 
       color: blue; 
      } 
      .my-class pre { 
       white-space:pre-wrap; 
      } 
     </style> 
    </head> 
    <body> 
     <pre>Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test </pre> 
    </body>  
</html>

这是因为（它似乎）的html和body标签被剥离出来，当你嵌入此在div（这有一定的道理）。因此，只需添加含有div和班上的父母和所有的工作 - 无论是嵌入在电子邮件：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <style type="text/css"> 
      .my-class * { 
       font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; 
       color: blue; 
      } 
      .my-class pre { 
       white-space:pre-wrap; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="my-class"> 
      <pre>Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test </pre> 
     </div> 
    </body>  
</html>

来源

2017-07-14 WillyC

角4被设计为处理这应该保持它从与父元件干涉每组件的基础上的CSS。也许你可以使用Angular组件代替[innerHTML]来防止这个问题。这里是一个参考页：https://angular.io/guide/component-styles – petryuno1

但它已经在影响完全无关的部件 - 它影响了整个页面，不管是什么成分包含HTML。就像我的菜单上的字体改变一样，它甚至不是父组件。 – WillyC

为@ petryuno1建议，最好的方法是使用一个组成部分，它会范围的CSS /样式仅该组件，但在基本层面上你能应用类的<div [innerHTML]="myHtml | safeHtml"></div>如：

<div class="foo" [innerHTML]="myHtml | safeHtml"></div>

然后修改CSS目标之类的*代替如果一个组件是不可能的？

.foo * { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }

的class财产上<div>会无论修改仍然innerHTML。

希望帮助！

来源

2017-07-14 16:33:20

正如我上面提到的，嵌入式样式已经影响了不相关组件中的样式。我认为这是因为我特意绕过了安全信任，所以只是让浏览器保持不变，而浏览器尽职尽责地应用它们。 – WillyC

您提出的解决方案可以帮助我嵌入HTML，但问题是我正在生成整个HTML文档以用作电子邮件 - 我想我可以试试这个并将此类应用于嵌入式HTML中的每个元素？这可能工作 - 让我看看...... – WillyC

'*'将应用于页面和父页面上的** everything **。尽管'*'的存在使得它看起来像你的目标是将'font-family'应用于'[innerHTML]'内的** ALL **元素。使用类的前缀/名称间隔有助于防止父元素受到'*'的影响。带有'styles'或'stylesUrl'的组件默认会自己做一个名称空间，以防止父元素受到影响。 –

停止从风格影响母公司

回答

相关问题