innerHtml ne fonctionne pas avec 2 tubes ioniques, comment?

Question

J'ai un simple tuyau qui retourne une html

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ 
    name: 'rating', 
    pure: false 
}) 
export class RatingPipe implements PipeTransform { 
    transform(value: any): string { 
     let stars = "<ion-icon name='star'>" + value + "</ion-icon>"; 
     return stars; 
    } 
} 

le problème est quand je l'utilise, je reçois rien

// this works fine 
<p><span innerHtml="{{'<h1>some text</h1>'}}"></span></p> 

// if I add a pipe, it doesn't work 
<p><span innerHtml="{{variableFromControler | rating}}"></span></p> 

// if I add a pipe, it doesn't work 
<p><span [innerHtml]="variableFromControler | rating"></span></p> 

des idées?

Une solution

import { Pipe, PipeTransform } from '@angular/core'; 
import { DomSanitizationService } from '@angular/platform-browser'; // to become DomSanitizer 

@Pipe({ 
    name: 'rating', 
    pure: false 
}) 
export class RatingPipe implements PipeTransform { 
    sanitizer: any; 
    constructor(private domSanitizationService: DomSanitizationService) { 
     this.sanitizer = domSanitizationService; 
    } 

    transform(value: any): string { 
     value = parseInt(value); 
     let stars = ''; 

     for(let i = 1; i <= 5; i++) { 
      stars += i <= value ? "<ion-icon class='ion-ios-star'></ion-icon>" : "<ion-icon class='ion-ios-star-outline'></ion-icon>"; 
     } 

     return this.sanitizer.bypassSecurityTrustHtml(stars); 
    } 
} 

documentation on DomSanitizationService

Answer 1

Il ne fonctionnera pas avec cette html

"<ion-icon name='star'>" + value + "</ion-icon>" 

parce ion-icon est un composant ionique angulaire et il devrait charger par l'intermédiaire angular2 au lieu de simplement en utilisant innerHTML.

Quoi qu'il en soit, vous devez utiliser DomSanitanizeService pour votre pipe html comme ceci:

@Pipe({ 
    name: 'rating', 
    pure: false 
}) 
export class RatingPipe implements PipeTransform { 
    constructor(private domSanitizer: DomSanitizationService){} 
    transform(value: any): string { 
     let stars = "<div>" + value + "</div>"; 
     return this.domSanitizer.bypassSecurityTrustHtml(stars); 
    } 
} 

Et dans votre code html vous devez utiliser la liaison propriété:

<span [innerHtml]="text | rating"></span> 

Je miserait une enveloppe d'icône personnalisée pour votre cas:

@Component({ 
    selector: 'ion-rating-icon', 
    template: '<ion-icon name="star">{{rating}}</ion-icon>' 
}) 
class RatingIconComponent { 
    @Input() rating; 
} 

ensuite l'utiliser comme:

<ion-rating-icon [rating]="text"></ion-rating-icon> 

Voir tous les exemples Plunker