角度2 cmsサービスからhtmlの部分を生成

Question

私はCMSからページの一部を持っているので、単純なhttpサービスを使ってデータを取得し、ページに表示しています。しかし問題は、開発段階では、私はそれらのサービスを嘲笑したがっているということです。サービスから

public getComponentHtml(componentKey: string): Observable<string> { 
if (this.envName === 'dev') { 
    return Observable.of('<h1>{{isLogged()}}</h1>') 
} 
return this.http.get('cms?key=' + componentKey) 
    .map((response: Response) => response.json()) 
    .map((data: any) => { 
    return data.componentHtml; 
    }); 
} 

データはinnerHTMLのタグ内に配置されている：

1 is logged user from cms: <div [innerHtml]="menu"></div> 
2 is logged user from pure html {{isLogged()}} 

出力：そう

domSanitizer.bypassSecurityTrustHtml('html in string')//but nothing changed 

の場合：私は使用することも試みまし

1 is logged user from cms: {{isLogged()}} //here we got h1, so html works fine, but angular not even eval expression... 
2 is logged user from pure html true //true in pure html, shown to be sure that expression is valid 

htlmsの角度を嘲笑してもexprを評価しないエッセンス。何か案は？

Answer 1

あなたはあなたの内側のHTMLデータへのあなたのパイプを追加

@Pipe({ 
    name: 'sanitizeHtml' 
}) 
export class SanitizeHtmlPipe implements PipeTransform { 

    constructor(private _sanitizer:DomSanitizer) { 
    } 

    transform(v:string):SafeHtml { 
    return this._sanitizer.bypassSecurityTrustHtml(v); 
    } 
} 

のようにパイプを追加することができます。

<div [innerHtml]="menu | sanitizeHtml"></div>