innerHtml은 이온 2 파이프와 작동하지 않습니다. 어떻게?

Question

나는 내가 그것을 사용할 때 문제가있다 내가

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

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

일부 HTML을 반환하는 간단한 파이프가?

하나는 솔루션

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을 사용하십시오.

@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을 사용해야하기위한

<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