J'ai créé un email HTML qui s'affiche correctement dans quelques clients de messagerie que j'ai testés, mais lorsque j'en fournis un aperçu sur ma page, les styles incorporés dans l'impact innerHTML le parent. Il doit être possible d'éviter cela parce que quand je regarde le courrier électronique dans Gmail, il s'affiche correctement sans changer le style de Gmail lui-même.Arrêter les styles dans 'innerHTML` de l'impact parent
Voici quelques HTML qui montre le problème (mais affiche sans effets secondaires dans 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>
J'utilise angulaire 4 donc je l'inclure dans ma page de cette façon:
<div [innerHTML]="myHtml | safeHtml">
</div>
... et safehtml est juste un tuyau pour contourner les contrôles angulaires sur le code HTML Je Doser:
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);
}
}
Il fonctionne, en ce qu'il montre le code HTML dans la div, mais l'information de style change tout sur la page. Je comprends - j'utilise littéralement * dans mon style intégré. ... mais comme je l'ai dit, gmail parvient à «contenir» cela de manière à ne pas relooker les éléments parents. Comment puis-je accomplir cela? Idéalement, je voudrais un isolement total du style - comme je ne veux pas que les styles parents soient affectés par l'enfant ou que les styles enfants soient affectés par le parent (ce qui, semble-t-il, est le comportement de gmail) .
Mise à jour
Modification du code HTML pour les personnes suivantes ont fonctionner pour le courrier électronique et le contenu CSS, mais ne fonctionnait pas noyé dans Angulaire:
<!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>
C'est parce que (il semble Les balises html et body sont supprimées lorsque vous l'intégrez dans un div (ce qui est logique). Donc, il suffit d'ajouter un parent contenant div avec la classe et tout fonctionne - à la fois intégrés et à la l'e-mail:
<!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 est conçu pour gérer les CSS par composant, ce qui devrait l'empêcher d'interférer avec les composants parents. Peut-être que vous pouvez utiliser un composant Angular au lieu de [innerHTML] pour éviter le problème. Voici une page de référence: https://angular.io/guide/component-styles – petryuno1
Mais cela a déjà un impact sur des composants totalement indépendants - cela affecte la page entière, quel que soit le composant qui contient le html.Comme les polices sur mon menu changent, ce qui n'est même pas un composant parent. – WillyC