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

我试图在html中显示代码，并使用Google Code prettify来美化代码。我几乎接近完成我的要求，但是当我尝试外部化文件并从中提取代码时，它不起作用。谷歌代码在Angular2中部分工作的美化代码

这是我的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管消毒，它突出显示/美化它有代码段。

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

这是我的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..'); 
     } 
    );

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

来源

2017-04-09 srk

林假设“PR.prettyPrint（）'调用一个代码漂亮的全局API？如果你在分配this.demoJavaCodeFromFile之后调用它，在订阅的成功函数中？ –

@AhmedMusallam，它的确如此，它希望将代码附加到文档中，除非明确传入根，并且它不会输入shadowRoot或模板节点。请参阅[声明]（https://github.com/google/code-prettify/blob/master/src/prettify.js#L1530） –

你应该叫PR.prettyPrint();的ngAfterViewChecked组件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>

来源

2017-04-09 22:24:49

如何导入PR？我得到“找不到名字'PR'' – Wenneguen

你不能”导入“它，因为它不是一个模块，你可以像声明PR那样声明PR'var PR;'或者你可以像'var PR =窗口[ “PR”]' –

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

回答

相关问题