如何在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.)

但是如果我必须为所有 { 进行转义，这会有问题，请帮忙？

- user7161814

---

请添加您的component.ts文件。 - Rahul Kumar

看起来像是 http://stackoverflow.com/questions/40638885/how-to-generate-unrendered-html-elements-on-web-page-with-angular-2-1-1-like-sta/40640828#40640828，https://dev59.com/g5vga4cB1Zd3GeqP120u#39916193，http://stackoverflow.com/questions/42439074/how-to-display-display-htmlnot-parsed-in-angular2-template 的重复问题。 - Günter Zöchbauer

@GünterZöchbauer 我同意这是一个重复的问题，但那里的答案处理此类问题的方式很粗糙，如果我有很多代码要显示，我想我们需要一个库。 - user7161814

Answer 1

在你的ts文件中使用一个包含所有代码的变量，并使用{{stringThatContainsAllTheCode}}在html中显示它。

我认为最简单的方法是使用[innerHTML]="varContainingCode"，并将代码保存在组件类中。

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

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

如果你不想使用这个库，调用ng2-prism也是有用的。

这是一个Angular2代码块高亮组件库。

- Rahul Kumar

---

我的组件文件是空的，只是引用了使用 CLI 创建组件时获取的模板和 CSS 文件。这是一种方法，谢谢，但我不能像静态文本一样直接在我的 HTML 中使用它吗？ - user7161814

@INFOSYS 的答案已更新。 我进行了一些研究，找到了一个可以满足您需求的库。 - Rahul Kumar