0
私がテストしたいくつかの電子メールクライアントで正しく表示されるHTMLメールを作成しましたが、私のページにそのプレビューを表示すると、innerHTML親。これを避けることが可能でなければなりません。なぜなら、私がGmailの電子メールを表示するとき、Gmail自体のスタイルを変更することなく正しく表示するからです。ここでインパクト親からのinnerHTMLのスタイルを停止する
は、いくつかの問題を示して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>
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>
これは（それはそうされているため、あなたがこれをdivに埋め込むと、htmlとbodyのタグは取り除かれます（これは意味があります）。助言petryuno1 @として最善のアプローチはそれとしてコンポーネントを使用することであるスコープCSS /スタイルを考え
<!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>
Angular 4は、コンポーネントごとにCSSを処理するように設計されており、親コンポーネントと干渉しないようにする必要があります。おそらく、[innerHTML]の代わりにAngularコンポーネントを使用して問題を防ぐことができます。 https://angular.io/guide/component-styles – petryuno1
しかし、すでに関連性のないコンポーネントに影響を与えています.HTMLを含むコンポーネントに関係なく、ページ全体に影響を与えます。私のメニューのフォントのように、親コンポーネントでもありません。 – WillyC