Google 代码 Angular2 中的美化代码部分工作
Google code Prettify code in Angular2 partially working
我正在尝试在 html 中显示代码并使用 Google 代码美化对其进行美化。我几乎接近完成我的要求,但是当我尝试将文件外部化并从中提取代码时,它不起作用。
这是我的 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();
}`
在模板中,我是这样取的
<p [innerHtml] ="demoJavaCode | trustedHtml"></p>
效果很好,其中包含代码的段落只有在使用 trustedHTML 管道进行清理后才会 highlighted/prettified。
但是,当我试图将代码外部化到具有完全相同代码内容的外部文件时,它不起作用。
这是我的 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..');
}
);
这里可能有什么问题?任何指示和建议都会有所帮助。
您应该在 ngAfterViewChecked
组件中调用 PR.prettyPrint();
lifecycle hook
看看这个 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>
我正在尝试在 html 中显示代码并使用 Google 代码美化对其进行美化。我几乎接近完成我的要求,但是当我尝试将文件外部化并从中提取代码时,它不起作用。
这是我的 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();
}`
在模板中,我是这样取的
<p [innerHtml] ="demoJavaCode | trustedHtml"></p>
效果很好,其中包含代码的段落只有在使用 trustedHTML 管道进行清理后才会 highlighted/prettified。
但是,当我试图将代码外部化到具有完全相同代码内容的外部文件时,它不起作用。
这是我的 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..');
}
);
这里可能有什么问题?任何指示和建议都会有所帮助。
您应该在 ngAfterViewChecked
组件中调用 PR.prettyPrint();
lifecycle hook
看看这个 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>