[英]How to Display Typescript code in Html
I want to display a component's code in a Html template, Not the value generated by the code but the actual code. 我想在Html模板中显示组件的代码,而不是代码生成的值,而是实际的代码。
like this 像这样
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']);
}
}
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. 这整个代码就像它们在问题部分的stackoverflow中显示的那样。我尝试使用
<pre>
和<code>
但似乎没有工作,我在控制台中收到此错误。
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 ? 但如果我必须为所有人逃脱它{这是有问题的,请帮忙吗?
Use a variable in your ts file that contains all the code and display it in html using this {{stringThatContainsAllTheCode}}
在ts文件中使用包含所有代码的变量,并使用此
{{stringThatContainsAllTheCode}}
将其显示在html中
I think the simplest way is to use [innerHTML]="varContainingCode"
and hold the code in the components class 我认为最简单的方法是使用
[innerHTML]="varContainingCode"
并在组件类中保存代码
<pre>
<code [innerHTML]="code"></code>
</pre>
export class AppComponent {
code = ` //type script code`
}
Or if you don't want to use this library call ng2-prism can be useful. 或者,如果您不想使用此库,则可以使用ng2-prism 。
This is a Angular2 codeblock highlighting component library. 这是一个Angular2代码块突出显示组件库。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.