Question

我想在Html模板中显示组件的代码，而不是代码生成的值，而是实际的代码。

像这样

   import { Injectable } from '@angular/core';
    import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
    import {CompetitionService} from "../shared/competition.service";
    import {Observable} from "rxjs";


    @Injectable()
    export class TableResolve implements Resolve<any> {

    constructor(private competitionService:CompetitionService) {}

    resolve(route: ActivatedRouteSnapshot):Observable<> {
      return this.competitionService.getTeams(route.params['id']);
      }
      }

这整个代码就像它们在问题部分的stackoverflow中显示的那样。我尝试使用<pre>和<code>但似乎没有工作，我在控制台中收到此错误。

Error: Template parse errors: Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.)

但如果我必须为所有人逃脱它{这是有问题的，请帮忙吗？

Answer 1

在ts文件中使用包含所有代码的变量，并使用此{{stringThatContainsAllTheCode}}

在html中显示该变量

我认为最简单的方法是使用[innerHTML]="varContainingCode"并保存组件类

中的代码

<pre>
  <code [innerHTML]="code"></code>
</pre>

export class AppComponent {
  code = `   //type script code`
}

如果您不想使用此库，请致电ng2-prism。

这是一个Angular2代码块突出显示组件库。

如何在Html中显示Typescript代码

1 个答案: