ngNonBindable在angular-2中不起作用

问题描述

我想在我的应用程序组件中使用google pretty print显示源代码.我在'pre'标签中使用ngNonBindable.但是在编译/页面运行时会出错.

I want to display source code using google pretty print inside my app component. I am using ngNonBindable in 'pre' tag. but it give error on compile/page run.

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>

推荐答案

在此处查看演示: https://plnkr.co/edit/PPChFemU6HnXDBQohIsj?p=preview

Check Demo Here : https://plnkr.co/edit/PPChFemU6HnXDBQohIsj?p=preview

要显示 .ts 代码，可以使用 DomSanitizer 显示所需内容.

To display .ts code, You can use DomSanitizer to display what you want.

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

}

这篇关于ngNonBindable在angular-2中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！