[英]Google code Prettify code in Angular2 partially working
I am trying to display code in html and prettify it using Google Code prettify. 我正在尝试以html显示代码并使用Google Code prettify对其进行美化。 I am almost close to completion of my requirement, but when I try to externalize the file and pull code from it, it isn't working.
我几乎快要完成我的要求了,但是当我尝试将文件外部化并从中提取代码时,它就无法正常工作。
Here is my ts code snippet. 这是我的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();
}`
In template, I am fetching it like this. 在模板中,我这样获取它。
<p [innerHtml] ="demoJavaCode | trustedHtml"></p>
It works well, the paragraph which has code in it is highlighted/prettified only when it is sanitized using trustedHTML pipe. 它运行良好,只有使用trustedHTML管道进行清理时,其中带有代码的段落才会突出显示/修饰。
But when I just tried to externalize the code to an external file having the exact same code content it's not working. 但是,当我只是尝试将代码外部化为具有完全相同的代码内容的外部文件时,则无法正常工作。
Here is my ts snippet. 这是我的ts片段。
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..');
}
);
What could be wrong here? 这有什么问题吗? Any pointers and suggestions would help.
任何指示和建议都会有所帮助。
You should call PR.prettyPrint();
您应该调用
PR.prettyPrint();
inside the ngAfterViewChecked
component lifecycle hook ngAfterViewChecked
组件生命周期挂钩内
take a look at this plnkr: https://plnkr.co/edit/wDJCKx3RjpJID2Nb6j2L?p=preview 看看这个plnkr: https ://plnkr.co/edit/wDJCKx3RjpJID2Nb6j2L ? p = preview
here is the code from the plnkr: 这是来自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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.