ngNonBindable不能在angular-2中工作

Question

我想在我的应用程序组件中使用google漂亮打印来显示源代码。我在'pre'标记中使用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); 
    } 

}