html - 如何在 Html 中显示 Typescript 代码

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 codeblock 高亮组件库。