html - 合并 angular2 模板时 html 中的 EOF 字符？

Question

我有一个 nodeJS 应用程序，它读取目录中的所有 .md 文件，然后使用 marked 将其内容呈现为 HTML 。然后我将结果用作 Angular2 模板。

但是，我现在收到如下控制台错误:

Unhandled Promise rejection: Template parse errors:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("width="760" height="1300" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
</div>[ERROR ->]"): chapterComponent@1805:6
Invalid ICU message. Missing '}'. ("

<code>css
[ERROR ->]{{'
Page {
    background-color: white;
"): chapterComponent@395:0 ; Zone: <root> ; Task: Promise.then ; Value: BaseException {message: "Template parse errors:↵Unexpected character "EOF" …ckground-color: white;↵"): chapterComponent@395:0", stack: "Error: Template parse errors:↵Unexpected character…st:3000/node_modules/zone.js/dist/zone.js:356:38)"}

我不确定这是否是因为遇到了正在合并的各个文件中的 EOF 字符，或者我的 { 转义存在问题，因为错误消息也暗示了这一点。

错误底部引用的代码片段如下所示:

<code>css
{{'
Page {
    background-color: white;
    font-size: 17;
}
TextField {
    margin: 10;
    padding: 10;
}
Image {
    margin-top: 20;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 80;
}
Button {
    margin: 10;
    padding: 10;
}
'}}</code>

注意:chapterComponent@1805:6 是文件末尾

Answer 1

更新

我认为您需要将每个 { 替换为 {{'{'}} 并将 } 替换为 {{'}'}}，如错误消息所示。

根据评论不起作用

尝试使用反引号而不是单引号。单引号仅适用于单行字符串。

<code>css
{{`
Page {
    background-color: white;
    font-size: 17;
}
TextField {
    margin: 10;
    padding: 10;
}
Image {
    margin-top: 20;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 80;
}
Button {
    margin: 10;
    padding: 10;
}
`}}</code>