谷歌代码 Angular2 中的美化代码部分工作

Question

我正在尝试在 html 中显示代码并使用 Google Code prettify 对其进行美化。我几乎完成了我的要求，但是当我尝试将文件外部化并从中提取代码时，它不起作用。

这是我的 ts 代码 sn-p。

demoJavaCode: any;
demoJavaCodeFromFile: any;

ngOnInit() {
    this.demoJavaCode = 
      `<pre><xmp class="prettyprint">
         public class A {
             public static void main(String args[]) {
             }
         }
        </xmp></pre>`;
 }

ngAfterViewInit() { 
  PR.prettyPrint();
}`

在模板中，我是这样获取的。

<p  [innerHtml] ="demoJavaCode | trustedHtml"></p>

它运作良好，其中包含代码的段落只有在使用trustedHTML管道进行清理时才会突出显示/美化。

但是当我试图将代码外部化到具有完全相同代码内容的外部文件时，它不起作用。

这是我的 ts sn-p。

this._http.get("assets/java_code.txt").map(res => res.text()).subscribe(
      response => {
        this.demoJavaCodeFromFile = response;
      },
      error => {
        this.componentErrorMessage = error;
      },
      () => {
        console.log('File successfully loaded..');
      }
    );

这里有什么问题？任何指示和建议都会有所帮助。

Answer 1

您应该在ngAfterViewChecked 组件lifecycle hook 内调用PR.prettyPrint();

看看这个plnkr：https://plnkr.co/edit/wDJCKx3RjpJID2Nb6j2L?p=preview

这是来自 plnkr 的代码：

//src/app.ts 
import {Component, NgModule, VERSION, AfterViewChecked} from '@angular/core'
import { FormsModule }   from '@angular/forms';
import {BrowserModule} from '@angular/platform-browser'
import { HttpModule } from '@angular/http';
import { Http } from '@angular/http';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <button (click)="refresh()">refresh</button>
      <div [innerHtml]="code"></div>
    </div>
  `,
})
export class App implements AfterViewChecked {
  name:string;
  code: string;
  constructor(private http: Http) {
    this.name = `Angular! v${VERSION.full}`;
  }
  refresh(){
    this.http.get("javacode.html")
    .subscribe(
      res => {
        this.code = res._body;
      },
      ()=>{},
      ()=>{})

  }
  ngAfterViewChecked(){
      console.log('ngAfterViewChecked')
      PR.prettyPrint();
  }
}

@NgModule({
  imports: [ BrowserModule, HttpModule, FormsModule],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}
//--------------------------------------
//src/javacode.html
<pre class="prettyprint">
  public class Cube {

    int length;
    int breadth;
    int height;
    public int getVolume() {
        return (length * breadth * height);
    }
}
</pre>