如何在HTML中显示打字稿代码 | 如何在HTML中显示打字稿代码

本文介绍了如何在HTML中显示打字稿代码的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I want to display a component's code in a Html template, Not the value generated by the code but the actual code.

像这样

   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>，但似乎都无法正常工作，我在控制台中遇到此错误.

This whole code like they show in stackoverflow in the question section.I tried using <pre> and <code> but none seem to work ,i am getting this error in console.

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

但是如果我必须全部逃脱{这是有问题的，请帮忙吗?

But if i have to escape it for all { it is problematic please help ?

推荐答案

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

Use a variable in your ts file that contains all the code and display it in html using this {{stringThatContainsAllTheCode}}

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

I think the simplest way is to use [innerHTML]="varContainingCode" and hold the code in the components class

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

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

或者，如果您不想使用此库调用，可以将 ng2-prism 有用.

Or if you don't want to use this library call ng2-prism can be useful.

这是Angular2代码块突出显示组件库.

This is a Angular2 codeblock highlighting component library.

这篇关于如何在HTML中显示打字稿代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！