谷歌代码美化代码在Angular2部分工作

我试图用html显示代码，并用谷歌代码美化它。我几乎就要完成我的需求了，但是当我试图将文件外部化并从中提取代码时，它不起作用

这是我的ts代码片段

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

---

这里可能出了什么问题？任何提示和建议都会有所帮助。

您应该调用

PR.prettyPrint（）在
nAfterViewChecked
组件内

看看这个plnkr：

以下是plnkr的代码：

//src/app.ts
从'@angular/core'导入{组件，NgModule，版本，AfterViewChecked}
从'@angular/forms'导入{FormsModule}；
从“@angular/platform browser”导入{BrowserModule}
从'@angular/http'导入{HttpModule}；
从'@angular/Http'导入{Http}；
@组成部分({
选择器：“我的应用程序”，
模板：`
你好{{name}
刷新
`,
})
导出类应用程序实现AfterViewChecked{
名称：字符串；
代码：字符串；
构造函数（专用http:http）{
this.name=`Angular！v${VERSION.full}`；
}
刷新（）{
this.http.get（“javacode.html”）
.订阅(
res=>{
此.code=res.\u主体；
},
()=>{},
()=>{})
}
ngAfterViewChecked（）{
console.log（'ngAfterViewChecked'）
PR.prettyPrint（）；
}
}
@NGD模块({
导入：[BrowserModule，HttpModule，FormsModule]，
声明：[App]，
引导：[应用程序]
})
导出类AppModule{}
//--------------------------------------
//src/javacode.html
公共类多维数据集{
整数长度；
整数宽度；
内部高度；
public int getVolume（）{
返回（长*宽*高）；
}
}
您应该调用
PR.prettyPrint（）在
nAfterViewChecked
组件内

看看这个plnkr：

以下是plnkr的代码：

//src/app.ts
从'@angular/core'导入{组件，NgModule，版本，AfterViewChecked}
从'@angular/forms'导入{FormsModule}；
从“@angular/platform browser”导入{BrowserModule}
从'@angular/http'导入{HttpModule}；
从'@angular/Http'导入{Http}；
@组成部分({
选择器：“我的应用程序”，
模板：`
你好{{name}
刷新
`,
})
导出类应用程序实现AfterViewChecked{
名称：字符串；
代码：字符串；
构造函数（专用http:http）{
this.name=`Angular！v${VERSION.full}`；
}
刷新（）{
this.http.get（“javacode.html”）
.订阅(
res=>{
此.code=res.\u主体；
},
()=>{},
()=>{})
}
ngAfterViewChecked（）{
console.log（'ngAfterViewChecked'）
PR.prettyPrint（）；
}
}
@NGD模块({
导入：[BrowserModule，HttpModule，FormsModule]，
声明：[App]，
引导：[应用程序]
})
导出类AppModule{}
//--------------------------------------
//src/javacode.html
公共类多维数据集{
整数长度；
整数宽度；
内部高度；
public int getVolume（）{
返回（长*宽*高）；
}
}
Im假设'PR.prettyPrint（）'调用一个flobal API来对代码进行预处理？如果在分配this.demoJavaCodeFromFile后调用该函数，在subscribe？@AhmedMusallam的success函数中，它会调用该函数，并且它希望代码附加到文档，除非显式传入根，并且它不会进入shadowroot或模板节点。请参阅Im假设'PR.prettyPrint（）'调用一个flobal API来进行代码预类型化？如果在分配this.demoJavaCodeFromFile后调用该函数，在subscribe？@AhmedMusallam的success函数中，它会调用该函数，并且它希望代码附加到文档，除非显式传入根，并且它不会进入shadowroot或模板节点。看看如何导入PR？我得到“找不到名称‘PR’”，您不能“导入”它，因为它不是一个模块，您可以像
declare var PR一样将PR声明为var
或者您可以从窗口名称空间使用它，如
var PR=window[“PR”]
@ahmed musallam谢谢您的解决方案。您知道为什么它在
ngAfterViewInit
中不起作用吗？在查看选中后将代码放入
ngAfterViewChecked
这不是一个好主意，因为每当视图中的内容发生更改时，它都会触发，如果使用
OnPush
strategy@ArtemGalas这个答案与Angular 2有关，我不确定Angular 2之后情况是否发生了变化。要点是，您希望调用
PR.prettyPrint（）当DOM已呈现时，并确保在调用
PR.prettyPrint（）后整个模板未被更新如何导入PR？我得到“找不到名称‘PR’”，您不能“导入”它，因为它不是一个模块，您可以像
declare var PR一样将PR声明为var
或者您可以从窗口名称空间使用它，如
var PR=window[“PR”]
@ahmed musallam谢谢您的解决方案。您知道为什么它在
ngAfterViewInit
中不起作用吗？在查看选中后将代码放入
ngAfterViewChecked
这不是一个好主意，因为每当视图中的内容发生更改时，它都会触发，如果使用
OnPush
strategy@ArtemGalas这个答案与Angular 2有关，我不确定Angular 2之后情况是否发生了变化。要点是，您希望调用
PR.prettyPrint（）当DOM已呈现时，并确保在调用
PR.prettyPrint（）后整个模板未被更新
<p  [innerHtml] ="demoJavaCode | trustedHtml"></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..');
      }
    );

//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>