각진 HTML 템플릿에서 코드 태그가 작동하지 않습니다.

Question

HTML 페이지에 아래 스 니펫을 표시하고 싶습니다. 나는 각도 내 템플릿에 아래에 추가 한 2

{path: 'test', component: TestComponent} 

이를 달성하기 위해 사용하고 있습니다 : 나는 템플릿을로드 할 때

<pre> 
<code>{path: 'test', component: TestComponent}</code> 
</pre> 

, 나는 오류가 아래를 참조하십시오. 이 문제를 어떻게 해결할 수 있습니까? 코드 태그를 사용할 수 없습니까?

directive_normalizer.js:127 Uncaught Error: Template parse errors: 
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) (" 
     </ngb-tab> 
    </ngb-tabset> 
</div>[ERROR ->]"): TestComponent@31:6 
Invalid ICU message. Missing '}'. (" 
     </ngb-tab> 
    </ngb-tabset> 
</div>[ERROR ->]"): TestComponent@31:6 

Answer 1

오류 메시지는 해결책을 제공합니다. 다음을 수행하십시오.

<pre> 
<code>{{"{path: 'test', component: TestComponent}"}}</code> 
</pre> 

보간을 통해 내용이있는 문자열을 반환합니다.

Answer 2

Angular가 표현식으로 구문 분석하려고합니다. 아래에 표시된 '{'중괄호를 이스케이프 처리해야합니다.

<pre> 
<code>{{'{'}}path: 'test', component: TestComponent{{'}'}}</code> 
</pre>