停止從風格影響母公司

我已經創建了一個在幾個電子郵件客戶端我測試過正確顯示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'的組件默認會自己做一個名稱空間，以防止父元素受到影響。 –

停止從風格影響母公司

回答

相關問題