我想在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.)
但是，如果我必须全部逃脱{这是有问题的，请帮忙吗？
在ts文件中使用包含所有代码的变量，并使用html格式将其显示 {{stringThatContainsAllTheCode}}
我认为最简单的方法是[innerHTML]="varContainingCode"在组件类中使用和保存代码
<pre>
<code [innerHTML]="code"></code>
</pre>
export class AppComponent {
code = ` //type script code`
}
或者，如果您不想使用此库，则ng2-prism可能会有用。
这是Angular2代码块突出显示组件库。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句