ВнутреннийHtml не работает с ионными 2 трубами, как?

Question

У меня есть простая труба, которая возвращает некоторому 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; 
    } 
} 

проблема, когда я использую его, я ничего не получаю

// 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> 

каких-либо идеи?

Одно решение

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

Это не будет работать с этим HTML

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

потому что ion-icon является ионно-угловой компонент и он должен загрузить через angular2 вместо того, чтобы просто используя innerHTML.

В любом случае вы должны использовать DomSanitanizeService для HTML трубы, как это:

@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); 
    } 
} 

И в вашем HTML, вы должны использовать свойство связывания:

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

Я бы использовать заказную иконку оболочки для случай:

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

Затем использовать его как:

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

Смотреть все примеры в Plunker