Question

我正在尝试在HTML中显示代码并使用Google Code美化来美化它。我差不多完成了我的要求，但是当我尝试外化文件并从中提取代码时，它就无法正常工作。

这是我的ts代码段。

compile run -p android --android-studio

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

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

效果很好，只有在使用trustedHTML管道进行清理时，才会突出显示/修饰包含其中代码的段落。

但是当我试图将代码外部化为具有完全相同代码内容的外部文件时，它无法正常工作。

这是我的ts片段。

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

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

Answer 1

您应该在PR.prettyPrint();组件lifecycle hook

内拨打ngAfterViewChecked

看看这个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>

Google代码Preular在Angular2中的代码部分工作

1 个答案: