7
votes

Rendu css pour innerhtml en utilisant angular2

J'essaie de rendre un modèle HTML à l'aide d'innerhtml et d'une chaîne HTML + CSS, je reçois de SQL.

String de modèle Exemple: P>

@Component({
    selector: "home",
    templateUrl: `client/modules/home/home.component.html`,
    encapsulation: ViewEncapsulation.Emulated
})
export class HomeComponent implements OnInit{
    templateBody: string;
.....other code
}


0 commentaires

3 Réponses :


3
votes

injecter le désinfectant et appliquer bypassSecurityTrusthtml (valeur: String): SafeHTML au contenu HTML, comme illustré dans https://angular.io/docs/ts/latest/api/platform-Browser/index/domsanitizer -Class.html pour faire angular2 conscient du fait que vous faites confiance au contenu.

Voir aussi RC.1 Certains styles ne peuvent pas être ajoutés à l'aide de la syntaxe de liaison


0 commentaires

6
votes

Utilisez-le avec Domsanitizer avec BypassSecurityTrusthtml et SafeHTML Comme indiqué ci-dessous,

Démo: https://plnkr.co/edit/eblzriyal0il1snu6wjb?p=Preview xxx


1 commentaires

Bienvenue @shaungroenewald



2
votes

Je l'ai fait sans tuyaux et juste en injectant Domsanitizer et SafeHTML dans mon composant et en exécutant BypassecurityTrusthtml sur ma chaîne de balisage. Cela m'a permis de conserver mes styles en ligne d'être analysé.

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


3 commentaires

Cet article a été signalé comme une qualité basse qu'il manquait une explication. Essayez de développer votre réponse.


@DeekBrown Explanation ajoutée


@Taylor Michels Bonjour, j'ai utilisé votre code sa fonction de fonctionnement bien.Mais de clic ne fonctionne pas dans cette balise. Voici mon code

{{ valeur.data_format_value}}