角度2でngNonBindableが機能しない

Question

私のアプリケーションコンポーネント内でgoogle pretty printを使用してソースコードを表示したいと考えています。私は '前'タグでngNonBindableを使用しています。コンパイル/ページ実行時にエラーが発生します。

zone.js:388Unhandled Promise rejection: Template parse errors: 
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) (" 
<div id="routerContainer"> 
    <router-outlet></router-outlet> 
</div>[ERROR ->]"): AppComponent@37:6 
Invalid ICU message. Missing '}'. (" 
<div id="routerContainer"> 
    <router-outlet></router-outlet> 
</div>[ERROR ->]"): AppComponent@37:6 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: 
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) (" 

私のhtmlコードはここ

<pre class="prettyprint" ngNonBindable> 
    import {Component} from '@angular/core';          
</pre> 

Answer 1

チェックデモです：https://plnkr.co/edit/PPChFemU6HnXDBQohIsj?p=preview

---

.tsコードを表示するには、あなたが欲しいものを表示するには、DomSanitizerを使用することができます。

import {Component, NgModule, Pipe, PipeTransform} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 
import { FormsModule } from '@angular/forms'; 

import { DomSanitizer, SafeHtml } from '@angular/platform-browser' 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <pre [innerHtml]="html"> 
    </pre> 
    `, 
}) 
export class App { 
    name:string; 
    html: SafeHtml; 
    constructor(private sanitized: DomSanitizer) { 

    this.html = ` 
    import {Component, NgModule, Pipe, PipeTransform} from '@angular/core' 
    import {BrowserModule} from '@angular/platform-browser' 
    import { FormsModule } from '@angular/forms'; 

    @Component({ 
    selector: 'my-app', 
    template:' 
     <span> Angular2 </span> 
    ' 
    }) 
    `; 


    this.html = this.sanitized.bypassSecurityTrustHtml(this.html); 
    } 

}