innerHtmlはイオン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

ion-iconがイオン-角度成分であり、それはangular2経由で読み込むだけではなくすべきであるので、それは、このHTML

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

では動作しません。 innerHTMLを使用してください。私はあなたのためのカスタムアイコンラッパーを活用します

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

：

@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であなたがバインドプロパティを使用する必要があります。

とにかくあなたは、このようなあなたのhtmlパイプ用DomSanitanizeServiceを使用する必要がありますケース：

@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