ngNonBindable在angular-2中不起作用

Question

我想在我的应用程序组件内使用google pretty print显示源代码。 我在'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);
  }

}