角のHTMLテンプレートでコードタグが機能していません

Question

私はHTMLページに以下のスニペットを表示したいと思います。

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

私はテンプレートをロードすると、私はエラー以下を参照してください。私はこれを達成するために私のテンプレートで下に追加しました角度2.

に

{path: 'test', component: TestComponent} 

を使用しています。これをどうやって解決するのですか？コードタグを使用できませんか？

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>